CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggablejquery-ui-droppable
Richard Knop
Richard Knop

Reputation: 83745

JQuery UI Drag & Drop And Align

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:

enter image description here

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

Upvotes: 2

Views: 3030

Answers (1)

SirDerpington
SirDerpington

Reputation: 11470

I think jQuery UI sortable is what you are looking for. I hope you can change your HTML markup. Especially see the connected lists possibility.

I updated your jsfiddle. 

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

Changing it to sortable requires a few changes but still I think this is easier to achieve with sortable than draggable/droppable.

Instead of <div> I used <ul> and <li> and styled them accordingly. (but there are some minor changes you have to do, so the styling looks exactly the same as with divs)

<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

Referring to @R2D2's comment I added the min-height property, so even an empty list (<ul>) has enough height to accept a dropped element.

Upvotes: 7

Related Questions