jqueryui拖放&；放下并对齐

以下是我的可拖放实现：

我有多组播放列表，我需要能够将播放列表从一个组拖到另一个组。我可以做到这一点，但我想很好地定位/对齐删除的播放列表。现在，它只是在跌落后处于一个尴尬的位置

问题是：

我希望放置的div与可放置容器中的其他div对齐

我的代码：

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

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

我想这就是你要找的。我希望您可以更改HTML标记。 特别是看到可能性

我更新了你的密码

将其更改为sortable需要一些更改，但我仍然认为使用sortable比Dragable/Dropable更容易实现

我使用了

和

来代替

，并对它们进行了相应的样式设置。（但是您必须做一些小的更改，因此样式看起来与div完全相同）

A组





播放列表0
播放列表1
播放列表2
播放列表3

编辑

---

参考@R2D2的评论，我添加了

minheight

属性，因此即使是空列表（

）也有足够的高度来接受删除的元素。

只是出于好奇：我的答案不是您想要的吗？有一件事，当您从组B中拖动所有元素并将它们放到组a中时（将组B保留为空），你不能将任何元素放回B组。似乎它没有保存我的评论O.O。但是@R2D2我更新了我的小提琴并添加了一条简短的评论。现在应该可以工作了：）

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

<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>