Geek asks and answers

JQuery sorted using droppable

My fiddle: http://jsfiddle.net/Yc9WY/42/

Here you will see two groups, each of which contains 3 containers with the ability to delete. You can move events from group 1 to group 2 and to any slot. This works great.

When a group is full, I would like to give the user the ability to sort this group by moving events up and down. They should still move the event out of the group if they choose.

You will see my commented code where I started integrating the sortable library, but I get strange behavior.

Note. I cannot replace my draggable / dropable only with sorting. I need explicitly defined droppable areas (3 per group) so that the event can exist in slots 1 and 3 of group 1.

Here is my code

$(document).ready(function() {

// $(".sort").sortable({
//     revert: true
// });

$(".drag").draggable({
    //connectToSortable: ".sort",
    revert: true
    //helper: clone
});

$(".sort").droppable({
    drop: function(event, ui) {

        if (!($(this).children(".drag").size() == 1)) {
            $(this).append(ui.draggable);

            ui.draggable.css({
                left: 0,
                top: 0
            });
        }
    }

});
});

<div>Group 1:
<ul class="parent">
    <li class="sort"><a href="" class="drag">event 1</a></li>
    <li class="sort"><a href="" class="drag">event 2</a></li>
    <li class="sort"></li>
</ul>
</div>
<div>
Group 2
<ul class="parent">
    <li class="sort"></li>
    <li class="sort"><a href="" class="drag">event 3</a></li>
    <li class="sort"><a href="" class="drag">event 4</a></li>
</ul>
</div>

, !

+3
1

:)

Fiddle ( CSS): http://jsfiddle.net/jhogervorst/CPA5Y/

HTML:

<div class="group">
    <h1>Group 1</h1>

    <ul class="parent">
        <li class="droppable"><span class="draggable">Item 1</span></li>
        <li class="droppable"><span class="draggable">Item 2</span></li>
        <li class="droppable"></li>
    </ul>
</div>

<div class="group">
    <h1>Group 2</h1>

    <ul class="parent">
        <li class="droppable"><span class="draggable">Item 3</span></li>
        <li class="droppable"></li>
        <li class="droppable"><span class="draggable">Item 4</span></li>
    </ul>
</div>​

JavaScript:

$(".draggable").draggable({
    revert: true,
    revertDuration: 0
});

$(".droppable").droppable({
    activeClass: "active",
    hoverClass: "hover",

    accept: function (draggable) {
        // The droppable (li element).
        var droppable = $(this);

        // The droppable which contains the draggable, i.e., the parent element of the draggable (li element).
        var draggablesDropable = draggable.parent();

        // Is the draggable being dragged/sorted to the same group?
        // => We could just sort it, because there always enough space inside the group.
        if (droppable.parent().is(draggablesDropable.parent())) {
           return true;
        }

        // Nope, the draggable is being dragged/sorted to another group.
        // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted?
        else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) {
            return true;
        }

        // Nothing true?
        return false;
    },

    drop: function(event, ui) {
        // The droppable (li element).
        var droppable = $(this);

        // The draggable (span element).
        var draggable = ui.draggable;

        // The droppable which contains the draggable, i.e., the parent element of the draggable (li element).
        var draggablesDropable = draggable.parent();

        // Is the draggable being dragged to it own droppable?
        // => Abort, there nothing to drag/sort!
        if (droppable.is(draggablesDropable)) {
            return;
        }

        // Is the draggable being dragged to an empty droppable?
        else if (!droppable.find(".draggable").size()) {
            // Just drop the draggable there.
            droppable.append(draggable);
        }

        // Is the draggable being dragged/sorted to the same group?
        // => We can just sort it, because there always enough space inside the group.
        else if (droppable.parent().is(draggablesDropable.parent())) {
            // Is the draggable being dragged up?
            if (droppable.parent().find(".droppable").index(draggablesDropable) > droppable.parent().find(".droppable").index(droppable)) {
                // Add the dragged draggable droppable before the droppable.
                draggablesDropable.insertBefore(droppable);
            }

            // No, the draggable is being dragged down.
            else {
                // Add the dragged draggable droppable after the droppable.
                draggablesDropable.insertAfter(droppable);
            }
        }

        // Nope, the draggable is being dragged/sorted to another group.
        // => Is there an empty droppable left in the group to which the draggable is being dragged/sorted?
        else if (droppable.parent().find(".draggable").size() < droppable.parent().find(".droppable").size()) {
            // Find the first empty droppable in which the draggable is being dragged/sorted.
            var emptyDroppable = $($.grep(droppable.parent().find(".droppable"), function (item) {
                // Are there draggables inside this droppable?
                // => Return TRUE if not.
                return !$(item).find(".draggable").size();
            })).first();

            // Clone the dragged draggable droppable before itself, because we need to remember it position after moving it.
            var draggablesDropableClone = draggablesDropable.clone().insertBefore(draggablesDropable);

            // Is the draggable being dragged above the empty droppable?
            if (droppable.parent().find(".droppable").index(emptyDroppable) > droppable.parent().find(".droppable").index(droppable)) {
                // Add the dragged draggable droppable before the droppable.
                draggablesDropable.insertBefore(droppable);
            }

            // No, the draggable is being dragged below the empty droppable.
            else {
                // Add the dragged draggable droppable after the droppable.
                draggablesDropable.insertAfter(droppable);
            }

            // Remove the position of the dragged draggable, because there still some css left of the dragging.
            draggable.css({"top": 0, "left": 0});

            // Add the first empty droppable before the cloned draggable droppable. Remove the latter afterwards.
            draggablesDropableClone.before(emptyDroppable).remove();
        }
    }
});​
+7

More articles:


All Articles