Jquery Ui拖放问题

Question

我正在开发一个带有 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);

html

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

用法:

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

差点忘了，我使用jquery 1.5和jquery ui 1.8.1

提前致谢

Answer 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 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
                }
            });
        }