JQuery UI Drag & падение и Align

Question

Вот мой перетаскиваемым и Droppable реализация: http://jsfiddle.net/A26ww/

У меня есть группы списков воспроизведения, и мне нужно, чтобы иметь возможность перетащить список воспроизведения из одной группы в другую. Я могу это сделать, однако я хотел бы красиво позиционировать/выровнять выпавший плейлист. Сейчас он просто остается в неудобном положении после падения.

Вот проблема:

Я хотел бы упавший divto выравнивать красиво с другими дивами в сбрасываемой контейнере.

Мой код:

$(function() { 
    $(".draggable").draggable({ 
     revert: "invalid" 
    }); 

    $(".droppable").droppable({ 
     drop: function(event, ui) { 
      // TODO HELP ME 
     } 
    }); 
}); 

Answer 1

jQuery UI sortable Я думаю, это то, что вы ищете. Надеюсь, вы можете изменить свою разметку HTML. Особенно смотрите connected lists возможность.

Я обновил ваш jsfiddle.

$('.draggable, .droppable').sortable({ 
    connectWith: '.playlists' 
}); 

Изменение его Сортируемый требует несколько изменений, но все-таки я думаю, что это легче достичь с сортировкой, чем перетаскиваемым/Droppable.

Вместо <div> Я использовал <ul> и <li> и разработал их соответственно. (Но есть некоторые незначительные изменения, которые вы должны сделать, так что укладка выглядит точно так же, как и дивы)

<div class="group">Group A 
    <br> 
    <br> 
    <ul class="playlists droppable"> 
     <li class="playlist draggable">Playlist 0</li> 
     <li class="playlist draggable">Playlist 1</li> 
     <li class="playlist draggable">Playlist 2</li> 
     <li class="playlist draggable">Playlist 3</li> 
    </ul> 
</div> 

EDIT

Ссылаясь на @ комментарий R2D2, я добавил min-height свойство, так что даже пустой список (<ul>) имеет достаточно высоты, чтобы принять сброшенный элемент.