jquery - JQuery UI Drag & Drop And Align

Question

Here is my draggable and droppable implementation: http://jsfiddle.net/A26ww/

I have groups of playlists and I need to be able to drag a playlist from one group to another. I can do that however I would like to nicely position / align the dropped playlist. Right now it just stays in an awkward position after dropping.

Here is the problem:

I would like the dropped divto align nicely with other divs in the droppable container.

My code:

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

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

Answer 1

我认为jQuery UI sortable是您正在寻找的。我希望你能改变你的 HTML 标记。特别是查看连接列表的可能性。

我更新了你的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>) 也有足够的高度来接受放置的元素。