@jotter/drag
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Drag

version downloads size languages ES5 license

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元素在指定范围内拖动。

Features

  • 轻量无依赖,易于整合
  • 支持PC和移动设备
  • 支持指定拖动方向(自由、水平、垂直)
  • 支持设置拖动边界
  • 提供拖动事件的回调函数

Install

npm install @jotter/drag

cdn

<script>

Usage

<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)
  }
})

API

new Draggable(element, options)

element

被拖拽的元素。 可以是 DOM 元素或者元素选择器字符串。

  • type : HTMLElement | string

options

配置选项

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 - 拖动结束的回调函数。

Methods

实例方法

bind()

绑定可拖动事件。

unbind()

禁止拖动 (解除拖动事件)。

Package Sidebar

Install

npm i @jotter/drag

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

40.1 kB

Total Files

7

Last publish

Collaborators

  • mengqing723