Lightweight
drag-and-drop
library that allows you to quickly and easily make DOM elements draggable within specified boundaries.It supports setting drag element, limiting drag boundaries, and horizontal, vertical, and free drag.
一个轻量级的拖拽库,允许你快速而轻松地使DOM元素在指定范围内拖动。
- 轻量无依赖,易于整合
- 支持PC和移动设备
- 支持指定拖动方向(自由、水平、垂直)
- 支持设置拖动边界
- 提供拖动事件的回调函数
npm install @jotter/drag
cdn
<script>
<div class="drag-wrapper">
Here is the drag and drop area ...
<div id="drag-el">
<header id="drag-hd">Drag handler</header>
<div class="drag-body">
content...
</div>
</div>
</div>
new Draggable('#drag-el', {
handle: '#drag-hd',
boundary: '.drag-wrapper',
onMove(event, {offsetX, offsetY}) {
console.log('Dragging', event)
}
})
new Draggable(element, options)
被拖拽的元素。 可以是 DOM 元素或者元素选择器字符串。
type
:HTMLElement | string
配置选项
Property | Type | Default | Description |
---|---|---|---|
handle |
HTMLElement, string |
element |
监听拖拽事件的目标元素,默认拖动元素。 |
direction |
string |
both |
拖拽方向。 both , horizontal , x , vertical , y |
boundary |
HTMLElement, window, string, Object |
window |
可拖拽的区域边界。默认window ,也可以是元素 , CSS选择器 , 或包含{top,right,bottom,left} 的对象 |
clickThreshold |
number |
5 |
拖动距离阈值,判定是否为click事件。 |
onClick(event, data) |
Function |
- | click事件的回调函数。 |
onStart |
Function |
拖动开始的回调函数。 | |
onMove |
Function |
拖动中的回调函数。 | |
onEnd |
Function |
- | 拖动结束的回调函数。 |
实例方法
绑定可拖动事件。
禁止拖动 (解除拖动事件)。