Question

不确定是否可以这样做，有些人说没有，需要能够从可排序的拖拽拖放到dropable并实际发生掉落。 jsfiddle基于另一个实现垃圾桶的示例，但我需要将项目移动到新列表。请注意，drop只接受来自sortable2的项目。

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #drop_zone'
}).disableSelection();

$("#drop_zone").droppable({
    accept: "#sortable2 li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
      // ????        
    }
});

Answer 1

问题是，一旦删除元素，你想对该元素做什么？

例如，如果要删除元素，例如垃圾桶示例，则drop函数如下所示：

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        $(ui.draggable[0]).remove();
    }
});

我已为您添加了更新的jsFiddle：http://jsfiddle.net/LrVMw/5/

有关放置事件的文档：http://api.jqueryui.com/droppable/#event-drop

如果这是你想要的其他东西，请告诉我。

修改

要从列表中删除元素并将其添加到dropzone列表中，您只需在drop函数中添加1行：

$("#drop_zone").droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (ev, ui) { $("<li></li>").text(ui.draggable.text()).appendTo(this); // It's this line ui.draggable.remove(); } });

编辑jsFiddle：http://jsfiddle.net/LrVMw/8/

编辑2

不是仅仅从被删除的li元素中获取文本，而是获取完整的html，只需调整即可：

$("#drop_zone").droppable({ accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (ev, ui) { $("<li></li>").html(ui.draggable.html()).appendTo(this); ui.draggable.remove(); } });

和jsFiddle：http://jsfiddle.net/LrVMw/9/

从可排序拖到droppable？

1 个答案: