v-drag 弹框拖拽的实现


directives: {
    drag: {      
      mounted: function (el) {                     
        el.onmousedown = function(e1) {           
          let disx = e1.pageX - el.parentElement.offsetLeft;
          let disy = e1.pageY - el.parentElement.offsetTop;
          e1.stopPropagation();
          document.onmousemove = function (e) {
            let dx = e.pageX - disx
            let dy = e.pageY - disy
            // console.log(dx,dy,'before')
            // width: 644px;
            // height: 486px;
            // window.innerHeight: 937
            // window.innerWidth: 1920
       // 拖拽范围根据实际情况去写 if(dx < 0){ dx = 0 } if(dx > window.innerWidth - 644 - 52){ dx = window.innerWidth - 644 - 52 } if(dy > window.innerHeight - 486 - 52){ dy = window.innerHeight - 486 - 52 } if(dy < 0){ dy = 0 } // console.log(dx,dy,'after') el.parentElement.style.left = `${dx}px`; el.parentElement.style.top = `${dy}px`; e.stopPropagation(); }; document.onmouseup = function(e) { // eslint-disable-next-line no-multi-assign document.onmousemove = document.onmouseup = null; e.stopPropagation(); }; } } } }

  

上一篇:实现web页面元素的拖拽和缩放


下一篇:vue3 拖拽组件drag-drop