You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
875 B
47 lines
875 B
2 months ago
|
/**
|
||
|
|
* div拖拽
|
||
|
|
*/
|
||
|
|
class MoveElement {
|
||
|
|
constructor(el) {
|
||
|
|
this.$el = el;
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
init() {
|
||
|
|
const dv = this.$el;
|
||
|
|
|
||
|
|
// 🔴 关键修复：检查 dv 是否为有效 DOM 元素
|
||
|
|
if (!dv || typeof dv !== 'object' || !dv.nodeType) {
|
||
|
|
console.warn('MoveElement: 传入的 el 不是有效的 DOM 元素', dv);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let x = 0;
|
||
|
|
let l = 0;
|
||
|
|
let isDown = false;
|
||
|
|
|
||
|
|
dv.onmousedown = function(e) {
|
||
|
|
x = e.clientX;
|
||
|
|
l = dv.offsetLeft;
|
||
|
|
isDown = true;
|
||
|
|
dv.style.cursor = 'move';
|
||
|
|
e.preventDefault();
|
||
|
|
};
|
||
|
|
|
||
|
|
dv.onmousemove = function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if (!isDown) return;
|
||
|
|
const nx = e.clientX;
|
||
|
|
const nl = nx - (x - l);
|
||
|
|
dv.style.left = nl + 'px';
|
||
|
|
};
|
||
|
|
|
||
|
|
dv.onmouseup = function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
isDown = false;
|
||
|
|
dv.style.cursor = 'default';
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default MoveElement;
|