javascript - 从可排序拖动到可放置？

Question

不确定这是否可以完成，有些人说不可以，需要能够从可排序对象中拖动并放在可放置对象上，并实际发生放置。 jsfiddle 基于另一个实现垃圾桶的示例，但我需要将该项目移动到新列表。请注意，drop 只接受来自 sortable2 的项目。

http://jsfiddle.net/LrVMw/4/

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

我们将获取它的完整 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/