jQuery UI可拖动和可丢弃交互

jQuery UI draggable and droppable interaction

本文关键字：交互 拖动 UI jQuery      更新时间：2023-09-26

我在创建两个列表视图之间的交互时遇到问题。

我在这个线程中遵循了一个解决方案：JQuery UI-将可拖动附加到可丢弃

哪个是

$(myDroppable).droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

然而，当掉落时，li项目有一个奇怪的位置，我不知道是什么原因造成的。JSFiddle：http://jsfiddle.net/lightbringer/W3p7d/2/

我自己创建了另一个解决方案：

        $("#personlisting_assign").droppable({
        accept: "#wrapper_projectpersonlist li",
        drop: function(event, ui) {
            var el = ui.draggable[0].outerHTML;
            ui.draggable.remove();
            $("#personlist").append(el);
            $("#personlist li").removeAttr("style");
        }
    });

它工作得很好，但一旦一个元素被移到上面，我就无法将它移回旧列表。

这一次的JSFiddle在这里：http://jsfiddle.net/lightbringer/W3p7d/

我的想法是在两个列表视图之间自由移动一个项目。是的，我已经研究过connectSortTable解决方案，但我想在一个区域中删除一个项目，它将自动添加到该区域的列表视图中。

你能告诉我以上两种解决方案以及如何解决每种方案中的问题吗。提前感谢

尝试

    $("#personlisting_assign").droppable({
        accept: "#wrapper_projectpersonlist li",
        drop: function (event, ui) {
            ui.draggable.detach().appendTo('#personlist').removeAttr("style");
        }
    });
    $("#projectperson").droppable({
        accept: "#wrapper_personlist li",
        drop: function (event, ui) {
            ui.draggable.detach().appendTo($("#projectpersonlist")).removeAttr("style");
        }
    });

演示：Fiddle

相关文章：