Question

根据Stackoverflow post的答案，我有jQuery的1.6.4可拖动和可放置。一切似乎都运行正常，但是当你将它拖出可放置区域时，我无法从droppable中删除该项目。

请看一下JSfiddle：http://jsfiddle.net/tzp1560b/

注意我使用＆＃34; .live（＆＃39; mouseover＆＃39;，function（）{＆＃34;表示可拖动项目，因为它们是通过ajax加载的。

HTML：

 <div id="drop">
<div class="box">
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol>
</div>
</div>

<div id="search_result">
<ul class="list-entity">
<li id="object-22684">
<div class="clearfix">
<div class="body">
<h4>9032</h4>
<div class="content"></div>
</div>
</div>
</li>
<li id="object-22684" class="ui-draggable">
<div class="clearfix">
<div class="body">
<h4>9033</h4>
<div class="elgg-content"></div>
</div>
</div>
</li>

</ul>
</div>

JQuery的：

 $(function () {

    $('#search_result li').live('mouseover',function(){
    $(this).draggable({
            cursor: "move",
            //revert: "invalid",
            opacity: 0.8,
            appendTo: "body",
            helper: "clone",
            start: function(event, ui) {
                $(ui.helper).width($(this).width());
            }
        });
});

    $("#drop ol").droppable({

        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function (event, ui) {
            if (ui.draggable.is('.dropped')) return false;
            $(this).find(".drop-placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
                appendTo: "body",
                helper: "clone"
            }).addClass('dropped');
        }
   }).sortable({
        items: "#drop ol",
        sort: function () {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $(this).removeClass("ui-state-default");
        },
        out: function () {
            ui.item.remove();
            $(this).remove();
        }
    });

});

有人可以帮忙吗？谢谢。

Answer 1

使用 drop事件中的$(ui.draggable).remove();删除元素

http://jsfiddle.net/tzp1560b/1/

无法从droppable中删除draggable

1 个答案: