jQWidgets jqxSortable 排序事件

jQWidgets jqxSortable是一个基于jQuery的UI插件，它可以创建可排序、可拖动和可删除的列表。jqxSortable可以很好的用于制作可排序的任务清单、价格表、产品列表等等。

jQWidgets jqxSortable 排序事件是其中一种可用事件，它用于获取当前列表项的排序状态。下面我们将详细介绍这个事件的使用方法。

排序事件示例

下面是一个使用jqxSortable列表的示例：

<div id="sortable">
  <div>列表项1</div>
  <div>列表项2</div>
  <div>列表项3</div>
  <div>列表项4</div>
  <div>列表项5</div>
</div>

我们现在来创建一个jqxSortable对象，并且监听'onSort'事件：

var sortable = $("#sortable").jqxSortable({ 
    opacity: 0.8, 
    zIndex: 9999, 
    tolerance: "pointer", 
    revert: true
});

sortable.on('sort', function (event) { 
    var itemIndex = event.args.index;
    var item = $('#sortable').children()[itemIndex];
    console.log('您正在拖动第' + itemIndex + '个列表项');
});

在这个示例中，我们创建了一个可拖动的列表，并且使用on('sort')方法监听了排列事件。事件回调方法中，我们可以通过event.args.index获取当前列表项的索引值，然后找到当前的列表项。

回调参数

在'onSort'事件中，回调方法可以接收两个参数：

• event：事件实例对象
• ui：包含拖动列表项的信息，如拖动元素的位置坐标、拖动的列表项的索引值等

event.args.index是其中一个比较有用的回调参数，它可以获取当前拖动列表项的索引值，我们可以通过这个索引值来获取拖动的列表项。

可选参数

在jqxSortable中，有如下可选参数：

• 'appendToSelector'：可以用于指定元素在被拖动时的容器元素
• 'dragZIndex'：用于指定被拖动的元素的z-index值，默认为9999
• 'opacity'：用于指定被拖拽元素的透明度，默认为0.8
• 'revert'：指定被拖拽元素在拖拽结束时是否重新回到拖拽开始的位置，默认为true
• 'tolerance'：用于指定用什么方式触发是一个拖拽事件，可选值为：'intersect'、'fit'、'pointer'和'none'

总结

jQWidgets jqxSortable 排序事件是创建可排序、可拖动和可删除的列表的重要组成部分。我们可以使用'onSort'事件来获取拖动列表项的状态，并且通过jqxSortable的可选参数来调整列表的行为。希望这篇文章对您理解jqxSortable有所帮助。