easyui Draggable组件实现拖动效果-JavaScript中文网-JavaScript教程资源分享门户

EasyUI 是一款流行的前端 UI 框架，其中提供了许多有用的组件。其中，Draggable 组件可以帮助我们实现 DOM 元素的拖动功能。

Draggable 组件的使用方法

首先，我们需要在页面中引入 EasyUI 的 CSS 和 JS 文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easyui/1.9.19/themes/default/easyui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easyui/1.9.19/jquery.easyui.min.js"></script>

然后，在 HTML 中定义一个需要拖动的元素，并为其添加 draggable 类：

<div id="box" class="draggable">
  <p>这是一个可拖动的元素</p>
</div>

最后，在 JS 中调用 Draggable 组件：

$('#box').draggable({
  handle: 'p', // 只能通过 p 元素进行拖拽
  proxy: 'clone', // 拖拽时显示的辅助元素是元素的副本
  revert: true // 拖拽结束后，如果没有放置到有效区域，自动返回原来的位置
});

这样，我们就完成了一个简单的拖动效果。当我们鼠标按住 p 元素并拖动时，整个 div 元素会跟随移动；如果放置到了有效区域，则会停留在那里，否则会自动返回原来的位置。

Draggable 组件的高级用法

除了基本的拖动功能以外，Draggable 组件还提供了许多高级用法。下面介绍一些常用的设置：

限制拖动范围

我们可以通过设置 containment 属性来限制元素的拖动范围。例如，如果我们希望元素只能在某个区域内拖动，则可以这样设置：

$('#box').draggable({
  containment: '#container'
});

其中，#container 是包含元素的选择器。

禁止拖动

如果我们希望在某些情况下禁止元素的拖动，可以通过设置 disabled 属性实现：

$('#box').draggable('disable'); // 禁止拖动
$('#box').draggable('enable'); // 启用拖动

拖动事件

Draggable 组件提供了多个事件，可以让我们在拖动过程中执行一些操作。例如，当元素开始拖动时，会触发 onStartDrag 事件；当元素正在拖动时，会触发 onDrag 事件；当元素停止拖动时，会触发 onStopDrag 事件。我们可以在调用 Draggable 组件时，传入一个对象来注册这些事件的处理函数：

-- -------------------- ---- -------
---------------------
  ------------ ---------- -
    --------------------
  --
  ------- ---------- -
    --------------------
  --
  ----------- ---------- -
    --------------------
  -
---展开代码

拖动代理

默认情况下，拖动时显示的辅助元素是被拖动元素本身。但是，在某些情况下，我们可能希望使用其他元素作为拖动代理。可以通过设置 proxy 属性来实现：

$('#box').draggable({
  proxy: '<div style="border:1px solid red;width:50px;height:50px;"></div>'
});

上面的代码中，我们将拖动代理设置为一个红色边框的矩形。

示例代码

最后

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/4057

easyui Draggable组件实现拖动效果