Jquery Ui拖放问题

2024-02-16

我正在开发一个带有 jquery 的工具栏插件以及 jquery ui 的拖放功能。这个想法如下:我有一个列表(ul)和项目(li),其中每个项目代表一个工具,如文本,几何图形等。当我拖动工具然后将其放在容器上时,必须创建一个“小部件”。问题是,将该工具放到容器上后,就无法再通过拖放来使用它。拖放功能只需运行一次。

希望你能帮我。对不起我的英语不好。

这是代码

插件

    (function($){

//Attach this new method to jQuery
$.fn.extend({ 

    //This is where you write your plugin's name
    spkToolbar: function(options) {

        //Set the default values, use comma to separate the settings, example:
        var defaults = {
            isDraggable:false
            ,droppableDiv:undefined
        };

        var options =  $.extend(defaults, options);
        //Iterate over the current set of matched elements
        return this.each(function() {
            var o = options;
            $(this).addClass('toolbar');
            if(o.isDraggable)
                $('.toolbar').draggable();
            $(this).addClass('spkToolbar');

            var obj = $(this);              

            //Get all LI in the UL
            var items = $("ul li", obj);
            items.draggable({ appendTo: "body",helper: 'clone' });
            if(o.droppableDiv!=undefined){
                $(o.droppableDiv).droppable({
                    drop: function( event, ui ) {
                        // some extra code for proper widget creation
                    }
                });
            }
        });
    }
});
})(jQuery);

the html

<div id="toolbar">
    <ul>
        <li id="save" title="Guardar cambios"><img src="<c:url value="images/toolbar/save.png" />" /></li>
    </ul>
</div>

usage:

 jQuery('#toolbar').spkToolbar({droppableDiv:'#new-dropcontainer'});

几乎我忘记了,我使用 jquery 1.5 和 jquery ui 1.8.1

提前致谢


这是代码的工作版本:http://jsfiddle.net/marcosfromero/YRfVd/ http://jsfiddle.net/marcosfromero/YRfVd/

我添加了这个 HTML:

<div id="new-dropcontainer">
    <ul>
    </ul>
</div>

与此关联的 JavaScript:

        if(o.droppableDiv!=undefined){
            $(o.droppableDiv).droppable({
                drop: function( event, ui ) {
                    // clone the original draggable, not the ui.helper
                    // and append it to the ul element inside new-dropcontainer
                    jQuery('#new-dropcontainer ul').append(ui.draggable.clone());
                    // some extra code for proper widget creation
                }
            });
        }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery Ui拖放问题 的相关文章

  • 在淘汰赛应用程序中使用 setInterval 进行轮询实现?

    我正在尝试使用 setInterval 实现简单的轮询机制 我有一个视图模型如下 define knockout jquery function ko function ViewModel var self this setInterval
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 单击回车键上的锚标记链接

    我有一个像这样的锚标签 a class btn btn danger href Continue a 它位于弹出窗口内 我需要按 Enter 键单击此链接 我尝试过以下代码 但它对我不起作用 document ready function
  • 自动完成仅显示消息并且结果可用,使用向上和向下箭头键进行导航。而是显示列表

    我的问题很清楚 我正在使用 jquery 自动完成 我不知道为什么它只向我显示消息 9 results are available use up and down arrow keys to navigate 没有向我显示结果列表 这是我的
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • 使用 AJAX 加载部分视图不起作用

    请原谅我 我是 MVC 和 AJAX 的新手 目前我只是提交一个表单 我想使用表单中的数据使用 ajax 更新部分视图中的表 My UserInfo部分视图如下所示 model IEnumerable
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html
  • 滚动顶部不符合预期

    Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案 我想在用户展开某一行时到达该行 这样当最后一个可见行展开时 用户不必向下滚动即可查看内容 I used example tbody on click td green
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u

随机推荐

  • 当同步/异步与串行/并发队列混合时,调度程序如何工作?

    在 Grand Central Dispatch 中 调度程序如何处理不同的队列 serial and concurrent 当使用dispatch sync函数和dispatch async功能 首先我们需要两种类型queue one s
  • 使用 Spring Data Mongo 的 ObjectId 进行 Facet + 聚合查询问题

    我正在开发Spring Boot Spring Data Mongo 我真的很努力 public Page
  • 命令组合设计模式

    有没有人有 Ruby 中使用组合命令的好例子 这是我在各种设计模式文献中看到的一种设计模式混合体 听起来相当强大 但一直无法找到任何有趣的用例或代码 受到总体想法的启发这篇博文中的示例模式实现 http blog ashwinraghav
  • INVD指令有什么用?

    The x86 INVD http faydoc tripod com cpu invd htm使缓存层次结构无效without显然 将内容写回内存 我很好奇 这样的指令有什么用 鉴于人们对各个缓存级别中可能存在哪些数据的控制非常少 甚至对
  • jsp页面中使用spring bean的教程

    我不熟悉与 HTML 交付相关的技术 例如 JSP 但我知道基本概念 在我的应用程序中 我使用 Spring Beans 和 Spring Security 以及 Blaze DS 通过 AMF 协议与 Flex 应用程序进行通信 一切都很
  • Google 地图 API 中的建议路线选项?

    我需要显示源和目的地之间的多条路线 例如 如果我选择源和目的地 我就能够找到一条路线 但就像在谷歌地图中一样 我们有一个建议的路线选项 我需要实现它 但我所有的尝试都失败了 请找到下面的代码 例如 它显示源和目的地之间的单个路由 如果我错过
  • 在 php 中测量字符串大小(以字节为单位)

    我正在为一个门户网站做一个房地产提要 它告诉我字符串的最大长度应该是 20 000 字节 20kb 但我以前从未遇到过这个 我怎样才能测量byte的大小varchar string 所以我可以做一个 while 循环来修剪它 您可以使用 m
  • java中的资源是什么?为什么使用完后要关闭它?

    java中 资源 一词的含义是什么 尽管垃圾收集器在jvm中运行 为什么我们在使用后必须关闭它 为什么我们必须在finally块中编写资源清理代码 资源是数量有限的东西 例如数据库连接和文件描述符 GC 释放内存 但您仍然必须释放资源 例如
  • Nestjs ConfigModule.forRoot() 异步

    我想从具有 REST API 的配置服务器加载 Nestjs 中的配置 以允许集中式应用程序配置 但是 ConfigModule forRoot 函数没有异步版本 因此配置返回为undefined 有没有办法解决 通过创建返回 Nest C
  • 如何将系统音量与媒体播放器应用程序同步

    我刚刚开发了一个简单的媒体播放器 可以播放歌曲 并且有一个可以调节歌曲音量的搜索栏 这是我的代码 public class MainActivity extends AppCompatActivity Button playBtn Seek
  • 在 Windows 中使用两只鼠标执行完全不同的操作

    我目前正在尝试开发一个应用程序 以使用两只鼠标在 Windows 中执行完全不同的操作 然而 在花了几天时间之后 我开始怀疑使用 Windows API 是否可以实现我想要做的事情 由于我远不是 Windows API 方面的专家 因此我想
  • 是否可以使用 jQuery.attr() 函数设置多个数据属性?

    这有效 myObj attr data test 1 num1 myObj attr data test 2 num2 但这并没有 myObj attr data test 1 num1 data test 2 num2 我在这里错过了一些
  • 当 Firebase 函数发送时,时间戳会在 BigQuery 上返回错误

    我正在尝试从 Firebase 函数将时间戳字段发送到 BigQuery 我正在发送 admin firestore FieldValue serverTimestamp BigQuery 上的字段是 TIMESTAMP 类型 我收到一个错
  • 以科学记数法打印 cpp_dec_float ,不带尾随零

    我在用着cpp dec float http www boost org doc libs 1 55 0 libs multiprecision doc html boost multiprecision tut floats cpp de
  • dyld:警告,未知环境变量:DYLD_LIBRARY_PATH_64 位

    我使用 Mac OS X 开发人员工具捆绑的属性列表编辑器将环境变量 DYLD LIBRARY PATH 64 位设置为文件 MacOSX environment plist 中的值 path to dylib 我保存了该文件并退出 重新登
  • 将 PHP for 循环转换为 foreach [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我对算法不太熟悉 有人可以帮我把这个 for 循环转换为 foreach 吗 for i 0 i lt count cartBookI
  • 无线 iphone 应用程序分发 - itms 服务协议问题

    我已经遵循了所有的指示Apple http developer apple com library ios featuredarticles FA Wireless Enterprise App Distribution Introduct
  • pyspark sql查询:根据条件计算不同值

    我有一个数据框如下 id doctor id patient consumption type drug d1 p1 12 0 bhd d1 p2 10 0 lsd d1 p1 6 0 bhd d1 p1
  • keras.models.load_model 失败,'tags' = train

    我正在探索tensorflow 2 0的c API 问题 将模型加载到 python 中时 权重不会恢复 因此模型似乎未经训练 工作流程 我正在使用 TF 2 0 C api 来处理模型的训练 我遵循的一般设置是 1 使用 TF keras
  • Jquery Ui拖放问题

    我正在开发一个带有 jquery 的工具栏插件以及 jquery ui 的拖放功能 这个想法如下 我有一个列表 ul 和项目 li 其中每个项目代表一个工具 如文本 几何图形等 当我拖动工具然后将其放在容器上时 必须创建一个 小部件 问题是