11个好用的 jQuery 拖拽拖放插件

jQuery 是一款流行的 JavaScript 库，它提供了丰富的 API 和插件，可以帮助开发者快速构建交互 Web 应用程序。在本攻略中，我们将介绍 11 个好用的 jQuery 拖拽拖放插件，并提供两个示例说明。

1. jQuery UI

jQuery UI 是一款流行的 jQuery 插件库，它提供了丰富的 UI 组件和交互效果，包括拖拽、排序、调整大小等功能。其中，拖拽功能是 jQuery UI 的核心功能之一，可以帮助开发者快速实现拖拽效果。

以下是使用 jQuery UI 实现拖拽效果的示例：

<div id="draggable" class="ui-widget-content">
  <p>拖拽我</p>
</div>

$( function() {
  $( "#draggable" ).draggable();
} );

在上面的示例中，我们使用 draggable() 方法将 #draggable 元素设置为可拖拽的。

2. Sortable

Sortable 是一款轻量级的 jQuery 插件，它可以帮助开发者实现拖拽排序功能。Sortable 支持多种排序方式，包括垂直排序、水平排序、网格排序。

以下是使用 Sortable 实现拖拽排序功能的示例：

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

$( function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
} );

在上面的示例中，我们使用 sortable() 方法将 #sortable 元素设置为可排序的。

3. Draggable

Draggable 是一款轻量级的 jQuery 插件，它可以帮助开发者实现拖拽功能。Draggable 支持多种拖拽方式，包括垂直拖拽、水平拖拽、限制拖拽范围等。

以下是使用 Draggable 实现拖拽功能的示例：

<div id="draggable">
  <p>拖拽我</p>
</div>

$( function() {
  $( "#draggable" ).draggable();
} );

在上面的示例中，我们使用 draggable() 方法将 #draggable 元素设置为可拖拽的。

4. Droppable

Droppable 是一款轻量级的 jQuery 插件，它可以帮助开发者实现拖放功能。Droppable 支持多种拖放方式，包括拖放到指定区域、拖放到指定元素等。

以下是使用 Droppable 实现拖放功能的示例：

<div id="droppable">
  <p>拖放到这里</p>
</div>
<div id="draggable">
  <p>拖拽我</p>
</div>

$( function() {
  $( "#draggable" ).draggable();
  $( "#droppable" ).droppable({
    drop: function( event, ui ) {
      $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "拖放成功" );
    }
  });
} );

在上面的示例中，我们使用 draggable() 方法将 #draggable 元素设置为可拖拽的，使用 droppable() 方法将 #droppable 元素设置为可接受拖放的。

5. Interact.js

Interact.js 是一款轻量级的 JavaScript 库，它可以帮助开发者实现拖拽、缩放、旋转等功能。Interact.js 支持多种拖拽方式，包括垂直拖拽、水平拖拽、限制拖拽范围等。

以下是使用 Interact.js 实现拽功能的示例：

<div id="drag-1" class="draggable">
  <p>拖拽我</p>
</div>

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    // 拖拽开始时的回调函数
    onstart: function (event) {
      console.log('拖拽开始');
    },
    // 拖拽结束时的回调函数
    onend: function (event) {
      console.log('拖拽结束');
    }
  });

在上面的示例中，我们使用 interact() 方法将 `.draggable 元素设置为可拖拽的。

6. Dragula

Dragula 是一款轻量级的 JavaScript 库，它可以帮助开发者实现拖拽排序功能。Dragula 支持多种排序方式，包括垂直排序、水平排序、网格排序。

以下是使用 Dragula 实现拖拽排序功能的示例：

<div id="left">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
<div id="right"></div>

dragula([document.getElementById('left'), document.getElementById('right')]);

在上面的示例中，我们使用 dragula() 方法将 #left 和 #right 元素设置为可排序的。

7. Gridster

Gridster 是一款轻量级的 jQuery 插件，它可以帮助开发者实现网格布局和拖拽功能。Gridster 支持多种布局方式，包括固定宽度、自适应宽度等。

以下是使用 Gridster 实现网格布局和拖拽功能的示例：

<ul>
  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
  <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">2</li>
  <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">3</li>
  <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">4</li>
</ul>

$(function(){
  $("ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 100]
  });
});

在上面的示例中，我们使用 gridster() 方法将 ul 元素设置为网格布局，并支持拖拽功能。

8. Muuri

Muuri 是一款轻量级的 JavaScript 库，它可以帮助开发者实现网格布局和拖拽功能。Muuri 支持多种布局方式，包括固定宽度、自适应宽度等。

以下是使用 Muuri 实现网格布局和拖拽功能的示例：

<div id="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

var grid = new Muuri('#grid', {
  dragEnabled: true
});

在上面的示例中，我们使用 Muuri() 方法将 #grid 元素设置为网格布局，并支持拖拽功能。

9. Draggabilly

Draggabilly 是一款轻量级的 JavaScript 库，它可以帮助开发者实现拖拽功能。Draggabilly 支持多种拖拽方式，包括垂直拖拽、水平拖拽、限制拖拽范围等。

以下是使用 Draggabilly 实现拖拽功能的示例：

<div class="draggable">
  <p>拖拽我</p>
</div>

var draggable = new Draggabilly('.draggable');

在上面的示例中，我们使用 Draggabilly() 方法将 .draggable 元素设置为可拖拽的。

10. Dragdealer

Dragdealer 是一款轻量级的 JavaScript 库，它可以帮助开发者实现拖拽功能。Dragdealer 支持多种拖拽方式，包括垂直拖拽、水平拖拽、限制拖拽范围等。

以下是使用 Dragdealer 实现拖拽功能的示例：

<div id="slider">
  <div class="handle"></div>
</div>

new Dragdealer('slider', {
  steps: 10,
  snap: true,
  animationCallback: function(x, y) {
    console.log(x);
  }
});

在上面的示例中，我们使用 Dragdealer() 方法将 #slider 元素设置为可拖拽的。

11. Tocca.js

Tocca.js 是一款轻量级的 JavaScript 库，它可以帮助开发者实现拖拽功能。Tocca.js 支持多种拖拽方式，包括垂直拖拽、水平拖拽、限制拖拽范围等。

以下是使用 Tocca.js 实现拖拽功能的示例：

<div class="draggable">
  <p>拖拽我</p>
</div>

var draggable = new Tocca('.draggable');

在上面的示例中，我们使用 Tocca() 方法将 .draggable 元素设置为可拖拽的。

结论

通过以上介绍，我们了解了 11 个好用的 jQuery 拖拽拖放插件，并提供了两个示例说明。在实际应用中，我们可以根据需要选择适合的插件来实现拖拽拖放功能，提高 Web 应用程序的交互性和用户体验。