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

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

而不是 <div>我用过<ul>和<li>并相应地设计它们的样式。 (但是您必须做一些小的更改，因此样式看起来与 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> )也有足够的高度来接受放置的元素。