jQWidgets jqxTabs dragEnd事件

jQWidgets是一个强大的JavaScript框架，提供了各种UI控件，其中包括jqxTabs控件。jqxTabs控件是一个用于创建选项卡式界面的控件。在使用jqxTabs控件过程中，可以使用dragEnd事件来监听选项卡拖拽结束事件。

dragEnd事件的基本用法

首先，需要在页面上引入jQWidgets库和相应的CSS文件，然后创建一个jqxTabs控件：

<div id="myTabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

// 创建jqxTabs控件
$("#myTabs").jqxTabs();

接着，可以使用dragEnd事件来监听选项卡拖拽结束事件：

// 监听dragEnd事件
$("#myTabs").on("dragEnd", function(event) {
  console.log("dragEnd");
});

在此基础上，可以编写更加复杂的逻辑代码，以实现自己的需求。

示例1：拖拽选项卡时，显示选项卡序号

<div id="myTabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

// 创建jqxTabs控件
$("#myTabs").jqxTabs();

// 监听dragEnd事件
$("#myTabs").on("dragEnd", function(event) {
  // 获取拖拽结束时当前选项卡的序号
  var index = $("#myTabs").jqxTabs("selectedItem");

  // 显示选项卡序号
  console.log("选项卡序号：" + index);
});

示例2：拖拽选项卡时，重新排列选项卡序号

<div id="myTabs">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

// 创建jqxTabs控件
$("#myTabs").jqxTabs();

// 监听dragEnd事件
$("#myTabs").on("dragEnd", function(event) {
  // 获取拖拽结束时当前选项卡的序号
  var index = $("#myTabs").jqxTabs("selectedItem");

  // 获取拖拽源选项卡的序号
  var sourceIndex = event.args.item;

  // 如果当前选项卡的序号不等于拖拽源选项卡的序号，则交换两个选项卡的顺序
  if (index !== sourceIndex) {
    $("#myTabs").jqxTabs("removeAt", sourceIndex);
    $("#myTabs").jqxTabs("addAt", index, $("#myTabs ul li:eq(" + sourceIndex + ")").text(), $("#myTabs div:eq(" + sourceIndex + ")").html());
    $("#myTabs").jqxTabs("select", index);
  }
});

在此例中，我们通过获取拖拽源选项卡的序号和拖拽结束时当前选项卡的序号，来判断是否需要重新排列选项卡顺序。如果需要，则调用jqxTabs控件的removeAt、addAt和select方法，来重新排列选项卡。