@wuyuchentr/drag-lib NPM

这是我自己用原生JS开发的一个拖拽库

安装

npm install @wuyuchentr/drag-lib

使用

import Drag from 'drag-lib';

const drag = new Drag({
    el: document.getElementById('drag-box'),
    restrictions: {
        x: 1,
        y: 0,
        width: 1000,
        height: 1000
    },
    onDragStart: () => {
        console.log('开始拖拽');
    },
    onDrag: (e) => {
        console.log('拖拽中', e.clientX, e.clientY);
    },
    onDragEnd: () => {
        console.log('拖拽结束');
    }
})

setTimeout(() => {
    drag.makeUndraggable();
}, 5000);

API

选项

名字	类型	描述
el	HTMLElement or String	需要拖动的元素
restrictions	Object	限制元素拖动
onDragStart	Function	拖拽开始时的回调函数
onDrag	Function	拖动过程中的回调函数
onDragEnd	Function	拖拽结束时的回调函数

方法

名字	描述
makeDraggable	让元素变得可拖拽
makeUndraggable	让元素变得不可拖拽
position	得到可拖拽元素的位置
setPosition	设置可拖拽元素的位置
setOptions	设置选项