drag-block

A simple drag plugin for DOM element that have been positioned.

Usage no npm install needed!

<script type="module">
  import dragBlock from 'https://cdn.skypack.dev/drag-block';
</script>

README

drag-block

一个简单的、将所有设置定位的元素变为可拖拽的小工具。

Installation

通过npm安装:

$ npm i -S drag-block

或直接获取源码:

Releases

Usage

在项目中import(ES6 modules)

import DragBlock from 'drag-block'

或在html中用引入源码中的lib/drag-block.js

<script src="drag-block.js"></script>

然后在js中使用:

let drag = new DragBlock(DomElement[, options])

可以监听相应的事件:

drag.on('dragStart', target => {
  console.log(target.style.left)
})

其中DomElement是需要可拖拽的position: fixed | absolute | reletive元素,options是选项对象。

本工具不负责处理目标元素的样式之类

Options

参数 | 说明 | 类型 | 默认值 -|-|-|- useDragBar | 是否使用弹出的拖拽条,false时直接拖拽目标本体 | Boolean | true

更多功能和配置项后续添加~欢迎提交issue

Events

事件名称 | 说明 | 回调参数 -|-|- dragStart | 点击bar或者本体开始拖动时触发 | 目标dom dragEnd | 拖动结束时触发 | 目标dom

Example

https://kinice.github.io/drag-block/