Question

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

我在这个帖子中遵循了一个解决方案： JQuery UI - Append Draggable to Droppable

是

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

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

您能告诉我上面的两个解决方案以及如何解决每个问题。提前致谢

Answer 1

尝试

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

jQuery UI可拖动和可放置的交互

1 个答案: