v-drag 弹框拖拽的实现

时间:2021-07-31
本文章向大家介绍v-drag 弹框拖拽的实现,主要包括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(); }; } } } }

  

原文地址:https://www.cnblogs.com/daifuchao/p/15084566.html