jQuery UI draggable and droppable взаимодействие

Question

У меня возникла проблема создания взаимодействия между 2 списками.

Я последовал решение в этой теме: JQuery UI - Append Draggable to Droppable

который

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

Однако при падении, элемент литий имеет странную позицию, и я не знаю, чем это вызвано. 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 ListViews. И да, я посмотрел на решение 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