jQWidgets jqxSortable cancel 属性

介绍

jQWidgets是一个基于JavaScript的UI组件库，可用于快速创建各种UI界面。其中，jqxSortable是其中的一个插件，用于实现可排序列表等效果。而cancel属性则用于取消拖拽、拖动与排序等操作。

语法

$('selector').jqxSortable({
    cancel: 'string'
});

参数

• selector: 用于选取需要进行排序的元素
• cancel: 用于指定需要取消的元素选择器；支持多个元素选择器，中间用逗号隔开。

示例

<ul id="sortable">
  <li>Item 1</li>
  <li class="ui-state-disabled">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li class="ui-state-disabled">Item 5</li>
  <li>Item 6</li>
</ul>

<script>
$( function() {
  $( "#sortable" ).sortable({
    cancel: ".ui-state-disabled"
  });
  $( "#sortable" ).disableSelection();
} );
</script>

在上述示例中，我们使用了一个ul标签来创建一个可排序的列表。其中，li元素中有两个具有ui-state-disabled类名的元素，表示这两个元素不可拖拽、不可排序。我们使用$( "#sortable" ).sortable()来初始化可排序列表，同时使用cancel属性来指定具有ui-state-disabled类名的元素不可排序。

总结

通过cancel属性，我们可以灵活控制可排序列表的排序方式。使用这个属性可以防止一些元素被意外地拖拽或排序，从而提高了列表的安全性和可用性。