Vueカスタムドラッグ要素の実装
1627 ワード
他のネットユーザーの基礎の上で変えて、格の縁の上でドラッグ&ドロップの機能を実現します
//html
//js
onMoveBoxBefore(e) {
let box = e.target;
let _xl = e.offsetX, _xr = box.clientWidth - e.offsetX; //x
let _yt = e.offsetY, _yb = box.clientHeight - e.offsetY; //y
// div 0 3
if (((_xl > 0 && _xl < 3) || (_xr > 0 && _xr < 3)) || ((_yt > 0 && _yt < 3) || (_yb > 0 && _yb < 3))) {
box.style.cursor = "all-scroll";
box.classList.add("notselect");
box.onmousedown = (e) => {
//
let disX = e.clientX - box.offsetLeft;
let disY = e.clientY - box.offsetTop;
document.onmousemove = (e) => {
let left = e.clientX - disX;
let top = e.clientY - disY;
box.style.left = left + 'px';
box.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
} else {
box.style.cursor = "default";
box.classList.remove("notselect");
box.onmousedown = null;
}
}
//css
.video_box {
position: absolute;
width: 100px;
height: 100px;
top: 0;
right: 0;
background-color: red;
z-index: 333;
}
.notselect {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}