jQuery EasyUI API 中文文档 – Draggable 可拖拽

这里是关于“jQuery EasyUI API 中文文档 - Draggable 可拖拽”的完整攻略。

概述

Draggable 翻译成中文即为可拖拽，在 jQuery EasyUI 中负责处理元素的拖拽操作。它能够让用户自由拖动元素并放置到指定位置，为用户提供了更多的交互方式。

API文档

属性

• handle: 拖动手柄的 CSS 选择器，只有鼠标按下在拖动手柄区域内才会触发拖动。
• disabled: 是否禁用拖动功能，可设置为 true 或 false，默认为 false。

方法

• enable(): 启用拖动功能。
• disable(): 禁用拖动功能。
• proxy(value): 重置代理元素（拖拽时后面跟着鼠标移动的虚影元素）的样式和位置。
• fix(): 计算代理的位置，避免滚动时代理出现偏移。

事件

• onStartDrag: 开始拖拽时触发。
• onDrag: 拖拽过程中触发。
• onStopDrag: 停止拖拽时触发。

示例说明

示例1：基本拖拽

下面是一个最简单的拖拽示例，当用户按下鼠标左键时即可开始拖拽，鼠标松开时则停止拖拽：

<div id="demo" style="width: 100px; height: 100px; background-color: red;"></div>

$('#demo').draggable();

示例2：自定义拖拽手柄

下面这个示例展示了如何指定一个拖拽手柄元素，只有在该元素内按下鼠标左键才会触发拖拽：

<div id="demo" style="width: 100px; height: 100px; background-color: red;">
    <div id="handle" style="width: 50px; height: 50px; background-color: green;"></div>
</div>

$('#demo').draggable({
    handle: '#handle'
});

以上两个示例只是展示了 Draggable 的一部分功能，我们可以根据业务需求灵活使用 Draggable 提供的 API 完成丰富的拖拽功能。