从可排序拖放到可拖放?

问题描述

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

Not sure if this can be done, some have said no, need to be able to drag from a sortable and drop on a dropable and have the drop actually occur. The jsfiddle is based on another example that implemented a trash can but I need the item to move to the new list. Note the drop only accepts items from 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) {
      // ????
    }
});

推荐答案

问题是，一旦删除该元素，您要如何处理?

The question is, what do you want to do with the element once it is dropped?

例如，如果要在放置元素时删除它(例如垃圾桶示例)，则放置函数如下所示:

For example, if you want to remove the element when it is dropped, like the trashcan example, your drop function looks like this:

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

我为您提供了一个更新的jsFiddle: http://jsfiddle.net/LrVMw/5/

I've included an updated jsFiddle for you: http://jsfiddle.net/LrVMw/5/

有关放置事件的文档: http://api.jqueryui.com/droppable/#事件删除

Documentation on the drop event: http://api.jqueryui.com/droppable/#event-drop

如果您还想要其他东西，请告诉我.

If it is something else you want, then let me know.

编辑

要将元素从列表中删除并将其添加到放置区的列表中，只需在放置函数中添加1行:

To remove the element from the list and add it to a list of the dropzone, you just have to add 1 line to the drop function:

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

Edited jsFiddle: http://jsfiddle.net/LrVMw/8/

编辑2

我们不仅会从放置的li元素中获取文本，还将获得其完整的html，只需稍作调整即可:

Instead of just getting the text from the li element that is dropped, we will get the full html of it, just abit of tweaking gives:

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

And the jsFiddle: http://jsfiddle.net/LrVMw/9/

这篇关于从可排序拖放到可拖放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！