jQuery UI可拖放交互

Question

I have a problem creating an interaction between 2 listviews.

I followed a solution in this thread: JQuery UI - Append Draggable to Droppable

which is

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

However, when dropped, the li item has a weird position and I don't know what causes it. JSFiddle: http://jsfiddle.net/lightbringer/W3p7d/2/

I created another solution myself:

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

It works perfectly, but once an element is moved over I cannot move it back to the old list.

The JSFiddle for this one is here: http://jsfiddle.net/lightbringer/W3p7d/

My idea is to be freely move an item between 2 listviews. And yes, I have looked at connectSortTable solution, but I want to drop an item in an area and it will be automatically add to the listview in that area.

Could you please advise me about the two solutions above and how to fix the problems in each one. Thanks in advance

Answer 1

Try

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

Demo: Fiddle