jQWidgets jqxSortable change 事件

jqxSortable 是 jQWidgets 提供的一种轻量级的、可配置的排序插件。通过它，您可以快速的将各种元素（如列表、表格、div等）进行排序，并且可自定义各种事件和效果。

其中，change 事件是在元素位置发生变化时被触发的一个事件，它返回了一个 event 对象，其中包含了以下属性：

• args.index: 当前被拖动的元素（startIndex）在新位置（endIndex）的索引值。
• args.originalEvent: 原始事件对象。
• args.element: 被拖动的元素。
• args.dropTarget: 当前元素的放置目标。

因此，您可以利用这些属性，对变化后的元素位置做出自定义的操作。

用法示例

$('#sortable').on('change', function (event) {
  console.log('Drag index: ' + event.args.index);
  console.log('Original event: ' + event.args.originalEvent);
  console.log('Dragged element: ' + event.args.element.outerHTML);
  console.log('Drop target: ' + event.args.dropTarget.outerHTML);
});

在这个示例中，我们监听了 jQuery 选择器 #sortable 的 change 事件，当元素位置发生变化时，在控制台打印出拖动的元素的索引值、原始事件对象、被拖动的元素和目标位置。

注意事项

• 在使用 jQWidgets jqxSortable 时，必须引入相应的 js 和 css 文件。
• 若是需要存储拖动后的状态，可以使用 serialize() 方法来将排序后的元素序列化为一个字符串。
• 事件触发次序依次是：dragStart > dragEnd > change。
• 对于移动端，请使用 touch 及 relatedTarget 构造 event 对象。

更多信息，可以参考 jQWidgets jqxSortable 官方文档。