从可排序拖动到可放置？答案

【问题标题】：Drag from sortable to droppable?从可排序拖动到可放置？
【发布时间】：2014-09-19 16:08:31
【问题描述】：

不确定这是否可以做到，有些人说不，需要能够从可排序的对象中拖放到可放置对象上并实际发生拖放。 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) {
      // ????        
    }
});

【问题讨论】：

标签： javascript jquery-ui jquery-ui-sortable droppable

【解决方案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/

drop 事件文档：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

我们将获得它的完整 html，而不是仅仅从被删除的 li 元素中获取文本，只需稍作调整即可：

$("#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/

【讨论】：

正如我所说，我需要将该项目移至新列表。
我们说的这个新列表是什么，是放置区吗？
是的，新列表就是放置区。
+1 Jimmy，获取框中的文本，小提琴有效，但在应用程序中 li 包含一个表格并且没有被移动，只是包含在 tds 中的文本跨度>
啊，我明白了，接下来又要进行一些调整了。