开发者

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 开发者_StackOverflow社区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.


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


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>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜