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拖放问题 的相关文章

随机推荐

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

    在 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 其中每个项目代表一个工具 如文本 几何图形等 当我拖动工具然后将其放在容器上时 必须创建一个 小部件 问题是