CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Sergei Basharov
Sergei Basharov

Reputation: 53850

Filter jQuery sortable items

I have two div containers that are sortable and connected with connectWith. In both there are sortable items that I can drag and drop as intended. These items have some classes, for example, group1 and group2. Let's call containers container1 and container2. I need to make possible group1 items to be dragged and dropped into any of containers and group2 items to be dragged and dropped only inside container2. I have read jQuery docs but didn't find an answer or an idea how to do this.

Upvotes: 0

Views: 1901

Answers (2)

cllpse
cllpse

Reputation: 21727

Try subscribing to the receive event. I haven't tested this, but my guess is that if you return false (the standard pattern for blocking events in jQuery), the items dropped won't be added to a list. Here's some pseudo-code to get you started...

$("...").sortable(
{
    receive: function ()
    {
        // assuming that "this" maps to the current object being dragged
        if (this.className.indexOf("...")) return false;
    }
});

Upvotes: 0

WTK
WTK

Reputation: 16971

EDIT I've come up with a solution that better answer your needs. This code can be tweaked a bit for example to make the items with group2 NOT sortable at all, even if they already are in container1.

JS:

$(function() {
    $(".container1,.container2").sortable();

    // on mousedown set the "connectWith" option of sortable depending on
    // whenever item that user may start dragging has class "group1" or not
    $(".container1 > li, .container2 > li").mousedown(function() {
        var $this = $(this);
        $this.parent().sortable("option", "connectWith", $this.hasClass('group1') ? '.connectedSortable' : false);
    })
});

HTML:

<ul class="container1 connectedSortable">
    <li class="group1">item 1.1</li>
    <li class="group2">item 1.2</li>
    <li class="group1">item 1.3</li>
    <li class="group2">item 1.4</li>
</ul>
<ul class="container2 connectedSortable">
    <li class="group1">item 2.1</li>
    <li class="group2">item 2.2</li>
    <li class="group2">item 2.3</li>
    <li class="group1">item 2.4</li>
    <li class="group2">item 2.5</li>
</ul>

Upvotes: 0

Related Questions