jQWidgets jqxSortable 停止事件

jqxSortable 是 jQWidgets 提供的一款拖拽排序的功能插件。它提供了各种拖拽排序所需要的事件，其中最常用的是停止事件(stop event)。

停止事件(stop)

停止事件(stop)通常在拖拽结束后触发。它可以用来在元素排序完成后进行一些操作，例如保存排序后的信息等。

停止事件(stop)的使用方式如下：

$("#sortable").on('stop', function (event) {
   // 在这里进行排序后的操作
});

事件参数

停止事件(stop)会传递一个 event 参数，这个参数包含了拖拽排序的信息，包括排序前、排序后以及拖拽的元素等。

以下是一个 event 参数的例子：

{
  "type": "stop",
  "args": {
    "item": {
      "id": "item5",
      "index": 4,
      "data": {
        "text": "Item 5",
        "value": 5
      },
      "target": null
    },
    "target": {
      "id": "sortable",
      "data": {},
      "items": [
        {
          "id": "item1",
          "index": 0,
          "data": {
            "text": "Item 1",
            "value": 1
          }
        },
        {
          "id": "item2",
          "index": 1,
          "data": {
            "text": "Item 2",
            "value": 2
          }
        },
        {
          "id": "item3",
          "index": 2,
          "data": {
            "text": "Item 3",
            "value": 3
          }
        },
        {
          "id": "item4",
          "index": 3,
          "data": {
            "text": "Item 4",
            "value": 4
          }
        },
        {
          "id": "item5",
          "index": 4,
          "data": {
            "text": "Item 5",
            "value": 5
          }
        },
        {
          "id": "item6",
          "index": 5,
          "data": {
            "text": "Item 6",
            "value": 6
          }
        }
      ]
    },
    "position": {
      "left": 271,
      "top": 319
    }
  }
}

其中，item 表示拖拽的元素，target 表示目标区域，position 表示元素的位置。

使用建议

停止事件(stop)是使用 jQWidgets jqxSortable 必不可少的一部分，它可以让你方便的对元素进行排序，并进行一些额外的操作。在使用时，建议先通过调试工具查看 event 参数，以便更好的了解拖拽排序的信息。