6

我很难li在我的ul. 我正在使用SortableJS。

<ul id="items">
    <li class="static">
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Static</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
</ul>

一个li类static不应该是可排序的。其他的应该是可排序的。

var el = document.getElementById('items');

var sortable = new Sortable(el, {
    onUpdate: function (evt) {
        var itemEl = evt.item;

        // here happens some stuff
    },
    filter: '.js-remove',
    onFilter: function (evt) {
        // here happens some stuff
    }
});

我知道你可以在jQuery UI 中进行排序，如下所示：

$( ".sortable" ).sortable({
    cancel: ".static"
});

我怎样才能在 SortableJS 中做到这一点？

4

2 回答 2

8

除了@BenG 评论，您需要使用filter而不是cancel.

var el = document.getElementById('items');
var sortable = Sortable.create(el, {
   filter: ".static"
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
    <li>item 1</li>
    <li class="static">item 2</li>
    <li>item 3</li>
</ul>

于 2016-02-10T14:58:33.460 回答
0

正如 Bob Stein 在评论中提到的：

您需要添加filter属性和回调侦听器函数，以完全防止元素在onMove: function (e) { return e.related.className.indexOf('static') === -1; }列表的开头或结尾重新排列。

使用多个列表：
如果您有两个列表，您可以从中交换元素，您可以将相同的代码添加到可排序的实例中。这是因为从另一个列表中拖动的元素不会调用待添加列表的回调函数，而是调用其源列表的回调函数。

var el = document.getElementById('items');
var sortable = Sortable.create(el, {
   filter: ".static",
   group: {
     name: 'list'
   },
   onMove(e) {
     return e.related.className.indexOf('static') === -1;          
   }
});
var items2 = document.getElementById('items2');
var sortable = Sortable.create(items2, {
   filter: ".static",
   group: {
     name: 'list'
   },
   onMove(e) {
     return e.related.className.indexOf('static') === -1;          
   }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="http://rubaxa.github.io/Sortable/st/app.css" rel="stylesheet" />
<ul id="items" class="block__list block__list_words">
    <li class="static">FRUITS</li>
    <li>Strawberry</li>
    <li>Banana</li>
    <li>Peach</li>
</ul><ul id="items2" class="block__list block__list_words">
    <li class="static">COMPANIES</li>
    <li>Microsoft</li>
    <li>Apple</li>
    <li>Intel</li>
</ul>

于 2022-03-04T11:04:04.440 回答