jquery sortable的拖动方法示例详解

jQuery Sortable 拖动方法示例详解

jQuery Sortable 是一款基于 jQuery 的可拖拽列表插件，它可以轻松实现列表元素的拖动排序。下面我将详细讲解该插件的使用方法，帮助您轻松实现排序效果。

步骤1：引入jQuery Sortable 插件

在网页中引入 jQuery 和 jQuery Sortable 插件的 js 文件，示例如下：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

步骤2：HTML 结构

在 HTML 结构中定义一个列表元素，示例如下：

<ul id="sortable">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
</ul>

步骤3：初始化 jQuery Sortable

通过调用 jQuery Sortable 插件的 sortable 方法，初始化列表元素，示例如下：

$(function() {
  $('#sortable').sortable();
});

示例1：实现排序功能

上述示例已经完成了 jQuery Sortable 的基本使用方法，但是我们还可以进一步完善功能。例如，可以实现排序后回调函数的效果，示例如下：

$(function() {
  $('#sortable').sortable({
    update: function(event, ui) {
      var items = $(this).sortable('toArray');
      console.log(items);
    }
  });
});

上述代码中，我们在 sortable 方法中加了一个 update 回调函数，该函数会在每次排序完成后触发，其中的 event 和 ui 参数可以获取当前操作的相关信息，items 数组包含了当前排序后的所有元素。

示例2：实现拖动放大缩小效果

在 jQuery Sortable 插件的基础上，我们还可以通过添加 CSS 样式来实现其他效果。例如，下面代码中的 list-group-item 类名是 Bootstrap 框架中的样式，我们可以通过该样式实现拖动放大缩小效果，示例如下：

<style>
  .list-group-item {
    transform: scale(1);
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
  }

  .list-group-item.sortable-dragging {
    transform: scale(1.05);
  }
</style>

<ul id="sortable" class="list-group">
  <li class="list-group-item">列表项1</li>
  <li class="list-group-item">列表项2</li>
  <li class="list-group-item">列表项3</li>
  <li class="list-group-item">列表项4</li>
  <li class="list-group-item">列表项5</li>
</ul>

<script>
  $(function() {
    $('#sortable').sortable({
      helper: 'clone',
      start: function(e, ui) {
        $(ui.item[0]).addClass('sortable-dragging');
      },
      stop: function(e, ui) {
        $(ui.item[0]).removeClass('sortable-dragging');
      }
    });
  });
</script>

在上述代码中，我们通过添加 CSS 样式实现了拖动放大缩小效果，该效果在拖动开始时添加 sortable-dragging 类名，拖动结束时再移除该类名。

总结：通过上述步骤和示例，我们已经基本完成了 jQuery Sortable 的使用方法，您可以根据具体需求进一步进行功能定制。