当前位置：首页 > jquery

jquery拖拽插件

2026-04-08 16:40:58jquery

jQuery拖拽插件推荐

以下是一些流行的jQuery拖拽插件，适用于不同的应用场景：

jQuery UI Draggable

官方提供的拖拽功能，支持自定义拖拽范围、限制、辅助线等
简单易用，文档齐全，适合基础拖拽需求
示例代码：
```
$("#draggable").draggable();
```

interact.js

轻量级但功能强大，支持拖拽、缩放、旋转等手势操作
不依赖jQuery但可以配合使用，适合需要高性能的场景
支持触摸设备，跨浏览器兼容性好

Draggabilly

专注于拖拽功能的轻量级插件
支持网格吸附、限制边界等特性
特别适合卡片式布局的拖拽需求

Sortable

专为列表排序设计的拖拽插件
支持嵌套列表、动画效果、触摸操作
常用于管理后台的可排序表格或列表

选择建议

基础项目使用jQuery UI Draggable最为方便，成熟稳定。需要复杂手势操作时interact.js更合适。如果是卡片类元素拖拽，Draggabilly更轻量。列表排序优先考虑Sortable。

实现示例

以jQuery UI为例实现基础拖拽：

jquery拖拽插件

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

<div id="draggable" style="width: 100px; height: 100px; background: #ccc;">
  拖拽我
</div>

<script>
$( function() {
  $( "#draggable" ).draggable({
    containment: "parent",
    cursor: "move"
  });
} );
</script>