0

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

例如，在这个 Dom 中，我希望 typea 项目在它们之间是可排序的，但不能将它们与 typeb 或 typec 项目混合。

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

JSFiddle 示例

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

1 回答 1

4

您可以使用 sortable's 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/

于 2013-04-04T21:11:10.233 回答