1

我在创建 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 解决方案，但我想在一个区域中放置一个项目，它将自动添加到该区域的列表视图中。

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

4

1 回答 1

0

尝试

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

演示：小提琴

于 2013-08-30T02:41:26.897 回答