Question

我有一个相当复杂的UI来实现。拖拉很多。但是，dom中有一些“组”可以排序，但我需要限制将项目拖过具有不同类名的项目的能力。

例如，在这个Dom中，我希望typea项目可以自己排序，但不能将它们与typeb或typec项目混合使用。

我意识到添加更多分组可以解决这个问题，但是，我的实际dom要复杂得多，而且我宁愿不用更多的组来进一步嵌套。

<div id="sortable">
    <div class="typea">typea1</div>
    <div class="typea">typea2</div>
    <div class="typea">typea3</div>
    <div class="typea">typea4</div>

    <div class="typeb">typeb1</div>
    <div class="typeb">typeb2</div>
    <div class="typeb">typeb3</div>
    <div class="typeb">typeb4</div>
    <div class="typeb">typeb5</div>

    <div class="typec">typec1</div>
    <div class="typec">typec2</div>
    <div class="typec">typec3</div>
    <div class="typec">typec4</div>
    <div class="typec">typec5</div>
    <div class="typec">typec6</div>
</div>

Answer 1

您可以使用sortable的change event，找到占位符的类（与原始元素相同），并在类不匹配时限制排序。

$( "#sortable" ).sortable({
    change:function(event,ui){
        var currentClass = $(ui.placeholder)[0].classList[0];
         if(!$(ui.placeholder).prev().hasClass(currentClass) 
            && !$(ui.placeholder).next().hasClass(currentClass))
             return false;
    }
});
$( "#sortable" ).disableSelection();

样本： http://jsfiddle.net/dirtyd77/atd8s/1/

jQuery.sortable（）和限制移动

1 个答案: