jquery ui拖拽问题答案

【问题标题】：Jquery Ui Drag and drop problemjquery ui拖拽问题
【发布时间】：2011-03-18 02:09:02
【问题描述】：

我正在使用 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

提前致谢

【问题讨论】：

标签： jquery jquery-ui drag-and-drop

【解决方案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
                }
            });
        }

【讨论】：

【解决方案2】：

你应该clone()可拖动对象。

或者更好的是，使用helper clone 选项

$( ".selector" ).draggable({ helper: 'clone' });

【讨论】：

嗨！是的，我在这里做了： var items = $("ul li", obj); items.draggable({ appendTo: "body",helper: 'clone' });
是的，对不起，我在工具栏上看到了draggable()，而不是另一个 LOL...无论如何，请查看购物车演示，了解他们如何“丢弃”该项目：jqueryui.com/demos/droppable/#shopping-cart跨度>

【解决方案3】：

为什么不只是部分淡出点击的图标，克隆它，然后在克隆的元素上启动拖放操作？

【讨论】：

【解决方案4】：

以防万一，我已将 jquery 的版本从 1.5 更改为 1.4.1，并且可以正常工作。不知道为什么。。

谢谢大家

【讨论】：

【解决方案5】：

我遇到了拖放项目定位问题。当我尝试拖放项目而不是附加项目时，它总是定位在顶部。这是我为此得到的灵魂。希望它有帮助.

$(".zone1, .zone2").sortable({
            connectWith: ".test",
            cursor: 'pointer',
            over: function (event, ui) {
                        ui.placeholder.appendTo(ui.placeholder.parent());
                }
            }
        }).disableSelection();

【讨论】：