@jotter/drag NPM

Draggable

一个轻量级的拖拽库，允许你快速而轻松地使DOM元素在指定区域内拖动。

Features

🎯 支持水平、垂直或自由方向拖拽
📱 兼容触摸和鼠标事件
🔒 可设置拖拽边界
🎨 支持 transform 和 position 移动方式
🎮 自定义拖拽手柄
📦 轻量无依赖，易于整合

Installation

npm install @jotter/drag

Usage

import Drag from '@jotter/drag'

// Basic Usage
const drag = new Drag('#element')

// With Custom Handle
const drag = new Drag('#element', {
	handle: '#handle',
	direction: 'x',
	moveType: 'transform',
	boundary: '.container',
	onMove: (event, { offsetX, offsetY }) => {},
})

// Custom boundary
const drag = new drag('#element', {
	boundary: {
		top: 0,
		right: 500,
		bottom: 500,
		left: 0,
	},
})

API

Constructor

new Drag(element: string | HTMLElement, options?: DragOptions)

Options

Option	Type	Default	Description
`direction`	`'both' \\| 'x' \\| 'y'`	`'both'`	拖动方向
`boundary`	`Window \\| HTMLElement \\| string \\| BoundaryObject`	`window`	拖动边界
`handle`	`HTMLElement \\| string`	当前元素	拖动句柄
`moveType`	`'position' \\| 'transform'`	`'position'`	移动方式
`clickThreshold`	`number`	`5`	点击事件移动阈值
`onClick`	`(event: MouseEvent \\| TouchEvent) => void`		点击事件
`onStart`	`(event: MouseEvent \\| TouchEvent) => void`		开始移动
`onMove`	`(event: MouseEvent \\| TouchEvent, offset: Offset) => void`		移动中
`onEnd`	`(event: MouseEvent \\| TouchEvent, offset: Offset) => void`		移动结束

Methods

Method	Description
`bind()`	监听拖动事件
`unbind()`	移除监听拖动事件
`reset()`	重置元素位置

注意事项

使用 position 模式时，确保目标元素设置了 position: absolute 或 position: fixed
使用 boundary 选项时，确保边界元素已渲染且有明确的尺寸
在移动端使用时，建议添加 touch-action: none 样式以避免页面滚动干扰
使用 transform 模式时，注意可能会影响子元素的定位和层叠上下文

浏览器兼容性

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
IE 11 (with transform fallback)

License

MIT

drag-and-drop draggable drag drop touch

@everything-registry/sub-chunk-495

11 months ago

11 months ago

2 years ago

2 years ago