让元素支持拖拽移动
# npm
npm i drag-utils-simple
# yarn
yarn add drag-utils-simple
# pnpm
pnpm add drag-utils-simple
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
new Drag(div);
设置元素的初始位置,默认为元素当前位置
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
new Drag(div, {
top: '100px',
left: '100px'
});
设置元素的层级(fixed),默认为99
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
new Drag(div, {
top: '100px',
left: '100px',
zIndex: 9999
});
设置元素的点击事件
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
new Drag(div, {
top: '100px',
left: '100px',
zIndex: 9999,
onClick: (e) => {
console.log(e)
}
});
当前绑定元素
当前配置
interface OptionsType {
top?: string;
left?: string;
zIndex?: number;
onClick?: Function;
}
当前环境
重置为初始状态
示例
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
const drag = new Drag(div, {
top: '100px',
left: '100px',
zIndex: 9999,
onClick: (e) => {
console.log(e)
}
});
setTimeout(() => {
drag.reset();
}, 3000);
销毁当前元素绑定的相关拖拽事件和点击事件
示例
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
const drag = new Drag(div, {
top: '100px',
left: '100px',
zIndex: 9999,
onClick: (e) => {
console.log(e)
}
});
setTimeout(() => {
drag.destroy();
}, 3000);
重新注册当前元素的相关拖拽事件和点击事件
常常用于destroy()后
示例
import Drag from 'drag-utils-simple';
const div = document.createElement('div');
div.innerHTML = 'move element';
const drag = new Drag(div, {
top: '100px',
left: '100px',
zIndex: 9999,
onClick: (e) => {
console.log(e)
}
});
setTimeout(() => {
drag.destroy();
setTimeout(() => {
drag.register();
}, 1000);
}, 3000);