jQWidgets jqxSortable排序事件

关于"jQWidgets jqxSortable排序事件"的完整攻略，以下是我总结的步骤：

1. 引入jQWidgets库

在HTML引入jQWidgets库的相关文件

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="https://jqwidgets.com/public/jqwidgets/js/jqx-all.js"></script>

2. HTML结构

使用 ul 和 li 标签来创建拖放列表。

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

3. 初始化排序控件

使用 jqxSortable() 方法来初始化排序控件，并使用 sortable() 方法将其连接到 HTML 中的元素。

$(document).ready(function () {
  $('#sortable').jqxSortable({
    opacity: 0.7,
    cursor: 'move',
    placeholder: 'placeholder',
    handle: '.handle'
  });
});

这里使用了 opacity 属性来设置拖动时元素的透明度；cursor 属性设置鼠标样式；placeholder 属性设置占位符的 class 名称；handle 属性设置了排序的手柄，默认为整个列表项可拖动。

4. 排序事件

通过 dragEnd 事件处理程序可以获得排序后的元素的列表。将元素的位置和用户在网站上的操作存储在服务器上。

$(document).ready(function () {
  $('#sortable').jqxSortable({
    opacity: 0.7,
    cursor: 'move',
    placeholder: 'placeholder',
    handle: '.handle'
  });

  $('#sortable').on('dragEnd', function (event) {
    var items = $('#sortable').jqxSortable('toArray');

    // 将在此处存储所需的排序操作
    console.log(items); 
  });
});

5. 完整示例1

下面是一个完整的示例，它演示如何指定在拖动元素时使用手柄。首先，我们将在列表项中添加一个 handle 元素。然后，在控件中将 handle 选项设置为该元素的类名。

HTML:

<ul id="sortable">
  <li>
    <span class="handle">&#9776;</span>
    Item 1
  </li>
  <li>
    <span class="handle">&#9776;</span>
    Item 2
  </li>
  <li>
    <span class="handle">&#9776;</span>
    Item 3
  </li>
  <li>
    <span class="handle">&#9776;</span>
    Item 4
  </li>
</ul>

JavaScript:

$(document).ready(function () {
  $('#sortable').jqxSortable({
    opacity: 0.7,
    cursor: 'move',
    placeholder: 'placeholder',
    handle: '.handle'
  });

  $('#sortable').on('dragEnd', function (event) {
    var items = $('#sortable').jqxSortable('toArray');

    // 将在此处存储所需的排序操作
    console.log(items); 
  });
});

6. 完整示例2

下面是一个完整的示例，它演示如何获取拖动的列表项的索引并将其在使用表单提交时发送到服务器。

HTML:

<form id="my-form" method="post" action="/submit">
  <ul id="sortable">
    <li>
      Item 1
    </li>
    <li>
      Item 2
    </li>
    <li>
      Item 3
    </li>
    <li>
      Item 4
    </li>
  </ul>
  <button type="submit">Submit</button>
</form>

JavaScript:

$(document).ready(function () {
  $('#sortable').jqxSortable({
    opacity: 0.7,
    cursor: 'move',
    placeholder: 'placeholder'
  });

  $('#sortable').on('dragEnd', function (event) {
    var items = $('#sortable li').toArray();
    var indexes = [];

    for (var i = 0; i < items.length; i++) {
      indexes.push(items.indexOf(items[i]));
    }

    $('input[name="indexes"]').val(indexes);
  });
});

在上面的示例代码中，我们通过在表单中添加一个隐藏的输入字段来创建索引数组，并将索引数组赋值为拖动后列表项的索引。