jQuery UI Draggable + Sortable 结合使用(实例讲解)

下面我将详细讲解“jQuery UI Draggable + Sortable 结合使用(实例讲解)”的完整攻略。

一、前言

在网页设计中，元素的拖拽和排序功能十分常见，为此，jQuery UI提供了Draggable（可拖动）和Sortable（可排序）插件用于实现这些功能，同时也有人将Draggable和Sortable结合使用，以实现更丰富的功能。

本文将详细讲解如何使用jQuery UI的Draggable和Sortable插件结合使用，为大家提供完整的攻略。

二、jQuery UI Draggable + Sortable 结合使用攻略

下面是jQuery UI Draggable + Sortable 结合使用的攻略：

1. 引入jQuery UI

使用jQuery UI Draggable和Sortable插件，首先需要引入jQuery和jQuery UI的js和css文件，具体可以在head标签中添加以下代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. HTML结构

首先，我们需要有一些HTML结构来演示如何使用Draggable和Sortable插件结合使用，实例如下：

<div id="sortable">
  <div class="ui-state-default" id="draggable1">Draggable Item 1</div>
  <div class="ui-state-default" id="draggable2">Draggable Item 2</div>
  <div class="ui-state-default" id="draggable3">Draggable Item 3</div>
  <!-- ... 可以添加更多的元素 ... -->
</div>

以上代码是一个简单的sortable列表，里面包含3个可拖拽的元素。

3. 初始化插件

接下来，我们需要使用jQuery UI来初始化Draggable和Sortable插件，具体代码如下：

$(function() {
  $( "#sortable" ).sortable({
    revert: true
  });
  $( "#draggable1, #draggable2, #draggable3" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
  });
  $( "ul, li" ).disableSelection();
});

以上代码中，我们首先使用了sortable函数初始化了一个可排序列表，同时通过connectToSortable选项把Draggable和Sortable插件连接在了一起。接着，我们使用了draggable函数将列表中的元素变为可拖拽的，通过helper选项可以设置拖拽时副本的样式，通过revert选项可以控制是否允许元素拖拽到非Sortable区域时自动返回。最后，我们通过disableSelection函数禁用了所有元素的文字选择功能。

4. 完整示例1

下面是一个完整的可排序和可拖拽列表的示例代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable + Sortable 结合使用示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 3px 3px 0 0; padding: 0; float: left; width: 100%; height: 22px; font-size: 14px; text-align: center; }
  </style>
  <script>
    $(function() {
      $( "#sortable" ).sortable({
        revert: true
      });
      $( "#draggable1, #draggable2, #draggable3" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
      });
      $( "ul, li" ).disableSelection();
    });
  </script>
</head>
<body> 
  <ul id="sortable">
    <li class="ui-state-default" id="draggable1">Draggable Item 1</li>
    <li class="ui-state-default" id="draggable2">Draggable Item 2</li>
    <li class="ui-state-default" id="draggable3">Draggable Item 3</li>
  </ul>
</body>
</html>

5. 完整示例2

下面是另一个完整的示例，在该示例中我们使用了更多的选项和回调函数。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable + Sortable 结合使用示例2</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 3px 3px 0 0; padding: 0; float: left; width: 100%; height: 22px; font-size: 14px; text-align: center; }
    .ui-draggable, .ui-sortable-helper { background-color: #fff; border: 1px solid #ccc; }
  </style>
  <script>
    $(function() {
      $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight",
        helper: "clone",
        cursor: "move",
        start: function(event, ui) {
          ui.item.addClass('dragging');
        },
        stop: function(event, ui) {
          ui.item.removeClass('dragging');
        }
      });
      $( "#draggable1, #draggable2, #draggable3" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
      });
      $( "ul, li" ).disableSelection();
    });
  </script>
</head>
<body> 
  <ul id="sortable">
    <li class="ui-state-default" id="draggable1">Draggable Item 1</li>
    <li class="ui-state-default" id="draggable2">Draggable Item 2</li>
    <li class="ui-state-default" id="draggable3">Draggable Item 3</li>
  </ul>
</body>
</html>

在以上示例代码中，我们首先给sortable函数添加了placeholder选项，用于设置拖拽时要插入的元素的样式，接着添加了helper选项以设置拖拽时副本的样式。最后，我们还添加了cursor选项以设置拖拽时鼠标的样式，并在start和stop回调函数中添加了类名以在拖拽开始和结束时改变元素的样式。