Jquery Ui拖放问题 [英] Jquery Ui Drag and drop problem

问题描述

我正在开发一个使用jquery和jquery ui拖放功能的单一工具栏插件。这个想法如下：我有一个列表（ul）和项目（li），其中每个表示一个工具，如文本，几何图形等。当我拖动工具，然后将其放在参与者上时，必须创建一个小部件。问题是将工具放在容器上之后，拖放就不再可用了。拖放功能只需一次。

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

这里是代码

插件

 （function（$）{
 
 //将这个新方法附加到jQuery 
 $ .fn.extend（{
 
 //这是你写你插件的名字
 spkToolbar：function（options）{
 
 //设置默认值，使用逗号分隔设置，例子：
 var defaults = {
 isDraggable：false 
，droppableDiv：undefined 
}; 
 
 var options = $ .extend（defaults，options）; 
 //迭代当前的匹配元素集
 return this.each（function（）{
 var o = options; 
 $（this）.addClass（'toolbar' ）; 
 if（o.isDraggable）
 $（'。toolbar'）。draggable（）; 
 $（this）.addClass（'spkToolbar'）; 
 
 var obj = $（this）; 
 
 //获取所有的LI 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为正确的小部件创建
} 
}）; 
} 
}）; 
} 
}）; 
}）（jQuery）; 
  

html

 code>< div id =toolbar> 
< ul> 
< li id =savetitle =Guardar cambios>< img src =< c：url value =images / toolbar / save.png/> />< /锂> 
< / ul> 
< / div> 
  

用法：

 code> jQuery（'＃toolbar'）。spkToolbar（{droppableDiv：'＃new-dropcontainer'}）; 
  

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

提前感谢

解决方案

这是一个代码的工作版本：
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克隆原来的draggable，而不是将ui.helper 
 //并将其附加到new-dropcontainer中的ul元素
 jQuery（'＃new-dropcontainer ul'）。append（ui.draggable.clone （））; 
 //一些额外的代码，用于正确的小部件创建
} 
}）; 
} 
  

I´m developing a single toolbar plugin with jquery and drag and drop functionality from jquery ui. The idea is as follows: i have a list (ul) and items (li) where each of them represents a tool like text, geometric figure, etc. so. when i drag a tool and then drop it on the conteiner a 'widget' must be created. The problem is after the tool was dropped on container it is not longer available from drag and drop. Drag and drop functionality works just once.

Hope you can helpme. Sorry for my english.

here is the code

the plugin

    (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'});

almost i forget, i use jquery 1.5 and jquery ui 1.8.1

Thanks in advance

解决方案

Here's a working version of your code: http://jsfiddle.net/marcosfromero/YRfVd/

I added this HTML:

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

with this associated 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
                }
            });
        }

这篇关于Jquery Ui拖放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！