JQuery UI 拖放和对齐

Question

这是我的可拖放实现：http://jsfiddle.net/A26ww/

我有一组播放列表，我需要能够将播放列表从一个组拖到另一个组。我可以这样做，但是我想很好地定位/对齐放置的播放列表。现在只是掉下来后一直处于尴尬的位置。

问题来了：

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

我的代码：

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

将其更改为可排序需要一些更改，但我仍然认为使用可排序比可拖动/可拖放更容易实现。

我使用了<ul> 和<li> 而不是<div>，并相应地设置了它们的样式。 （但你必须做一些小改动，所以样式看起来和 div 完全一样）

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

编辑

参考@R2D2 的评论，我添加了min-height 属性，因此即使是空列表 (<ul>) 也有足够的高度来接受丢弃的元素。