sortable.js filter 过滤或忽略指定元素

sortable.js filter 过滤或忽略指定元素,比限制第二行不允许拖动。该属性可以设置不允许拖拽元素的class样式类名，也可以自定义函数返回true或flase进行控制。

filter属性

通过设置class禁止拖动

通过设置class禁止拖动

<div class="box">
    <div id="g1" class="itxst">
        <div> item 2 无法被拖动 class包含了filter类</div>
        <div class="item" data-id="1" >
           item 1 
        </div>
        <div class="item filter" data-id="2" >
             item 2 
        </div>
        <div class="item" data-id="3" >
             item 3 
        </div>
    </div> 
</div>
<div id="msg"></div>
<script>
    //第一组 
    var g1 = document.getElementById('g1');
    var ops1 = {
        animation: 1000,
        delay: 30, 
        draggable: ".item",
        handle: ".move",
        /****************禁止被拖动的样式class****************/
        filter:".filter",
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable1.toArray();
            document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
        },
    }; 
    var sortable1 = Sortable.create(g1, ops1);
</script>

通过自定义函数禁止拖动

在线例子

<div class="box">
    <div id="g1" class="itxst">
        <div>filter属性自定义函数限制了 item 2 无法被拖动 </div>
        <div class="item" data-id="1" >
           item 1 
        </div>
        <div class="item" data-id="2" >
             item 2 
        </div>
        <div class="item" data-id="3" >
             item 3 
        </div>
    </div> 
</div>
<div id="msg"></div>
<script>
    //第一组 
    var g1 = document.getElementById('g1');
    var ops1 = {
        animation: 1000,
        delay: 30, 
        draggable: ".item",
        //被禁止拖动的元素,第二个元素不允许被拖动
        filter: function (evt, item) {
            if (item.dataset.id == "2") return true;
            return false;
        }, 
        //拖动结束
        onEnd: function (evt) {
            console.log(evt);
            //获取拖动后的排序
            var arr = sortable1.toArray();
            document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
        },
    }; 
    var sortable1 = Sortable.create(g1, ops1);
</script>