jQuery UI可拖放交互

Question

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

我在此线程中遵循了一个解决方案： JQuery UI-将Draggable附加到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解决方案，但是我想在一个区域中放置一个项目，它将自动添加到该区域中的listview中。

您能为我提供上述两种解决方案以及如何解决每个问题的建议。 提前致谢

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

演示： 小提琴