jQuery 可排序获得交换的2个元素

在本文中，我们将介绍如何使用jQuery的sortable方法来获取交换位置的两个元素。

阅读更多：jQuery 教程

什么是jQuery的sortable方法？

jQuery的sortable方法是一个强大的插件，允许用户将元素重新排序。通过拖拽元素，可以轻松地改变它们的位置。sortable方法可以应用于多种情况，如列表排序、表格列排序等。

使用sortable方法获取交换的2个元素

使用sortable方法获取交换的2个元素非常简单。我们将通过一个示例来演示。

HTML代码如下：

<ul id="myList">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
  <li>元素4</li>
</ul>

首先，我们需要在HTML中引入jQuery库和jQuery UI库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

然后，我们可以使用sortable方法对列表进行排序，并获取交换的两个元素：

$(function() {
  $("#myList").sortable({
    start: function(event, ui) {
      // 获取交换前的两个元素
      var item1 = ui.item;
      var item2 = ui.item.next();

      console.log("交换前的元素1：" + item1.text());
      console.log("交换前的元素2：" + item2.text());
    },
    stop: function(event, ui) {
      // 获取交换后的两个元素
      var item1 = ui.item;
      var item2 = ui.item.next();

      console.log("交换后的元素1：" + item1.text());
      console.log("交换后的元素2：" + item2.text());
    }
  });
});

在上面的代码中，我们使用了sortable方法，并通过start和stop事件获取了交换前后的两个元素。使用console.log输出了元素的文本内容，你也可以根据需要进行其他操作。

现在，当你在页面中拖拽列表项进行排序时，控制台会输出交换前后的两个元素。

示例说明

假设我们现在要对一个任务列表进行排序，并获取交换的两个任务。

HTML代码如下：

<ul id="taskList">
  <li class="task">任务1</li>
  <li class="task">任务2</li>
  <li class="task">任务3</li>
  <li class="task">任务4</li>
</ul>

JavaScript代码如下：

$(function() {
  $("#taskList").sortable({
    start: function(event, ui) {
      var task1 = ui.item;
      var task2 = ui.item.next();

      console.log("交换前的任务1：" + task1.text());
      console.log("交换前的任务2：" + task2.text());
    },
    stop: function(event, ui) {
      var task1 = ui.item;
      var task2 = ui.item.next();

      console.log("交换后的任务1：" + task1.text());
      console.log("交换后的任务2：" + task2.text());
    }
  });
});

当你拖拽任务进行排序时，控制台会输出交换前后的两个任务的文本内容。

总结

在本文中，我们介绍了如何使用jQuery的sortable方法来获取交换位置的两个元素。通过使用sortable方法的start和stop事件，我们可以轻松地获取交换前后的元素，并进行相应的操作。使用sortable方法可以方便地实现列表、表格等元素的排序功能。希望本文对你理解和应用jQuery的sortable方法有所帮助！