vue中拖拽div

ouyang丶

已于 2023-05-19 14:43:35 修改

阅读量184

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-18 14:56:44 首次发布

本文链接：https://blog.csdn.net/ou_change/article/details/130747213

版权

	<div @mousedown="mousedown"></div>
	mousedown (event) {
       let div1 = event.currentTarget.parentElement;
       div1.style.cursor = "move";

       let distanceX = event.clientX - div1.offsetLeft;
       let distanceY = event.clientY - div1.offsetTop;
       document.onmousemove = function (e) {
           div1.style.left = e.clientX - distanceX + "px";
           let maxTop = e.clientY - distanceY;
           div1.style.top = (maxTop > 5 ? maxTop : 5) + "px";
           div1.style.right = "auto";
       };
       document.onmouseup = function () {
           document.onmousemove = null;
           document.onmouseup = null;
           document.mousedown = null;
           div1.style.cursor = "default";
       };
   }