vue 实现流畅拖动效果及自定义拖动指令封装

最近在项目上遇到了图片拖动的需求，自己做了好久效果都不怎么好，最后参考了 vue自定义指令实现div拖动，找到了思路，解决了困惑。不过项目业务上的问题是复杂的，不仅仅能拖动那么简单，我在工作上遇到的需求如下几点:

1.实现一个电子地图，包括底图和图标，底图能拖动，图标也能拖，图标拖动时底图不动

2.滚动鼠标滚轮实现底图和图标的缩放，并保持比例，即图标和底图的相对位置不变

3.图标可点击，点击选中，图标样式变化，能图标相对坐标，传入后台保存。

我已开始的思路是：创建一个div,将底图设为此div的background-image,拖动的时候使用onmousedown,onmousemove和onmouseup,图标拖动用drag,drop,缩放改变div宽高。后来发现这种方式太不友好了，后面出现的问题越来越多，代码一行一行增多，体验越来越差，只要一放大缩小底图，再拖动图标就要不断地计算，相对位置也不准确。虽然勉强做了出来，可是当要改需求的时候，再来改代码，自己都看不懂，头皮发麻，重新写吧！当看到huahua_0825的博客时，顿时眼前一亮，使用自定义指令原来如此简洁清晰，就在昨天2019/1/1跨年之夜将之前的臃肿代码剔除了,使用css3 transform scale来缩放，使用它的好处就是不会改变原来元素的大小。

拖动核心代码（main.js全局指令）：

Vue.directive('drag',{

    inserted:function(el,binding){
        el.onmousedown=function(e){
            e.stopPropagation();
            let disx = e.pageX - el.offsetLeft;
            let disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e){
                e.preventDefault();
                el.style.left = e.pageX - disx+'px';
                el.style.top = e.pageY - disy+'px';
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
                //binding 传参，可忽略
                if(binding && binding.value){
                    binding.value.clientX=parseInt(el.style.left);
                    binding.value.clientY=parseInt(el.style.top);
                }

            }
        }
    },
});

缩放代码（main.js全局指令）：

Vue.directive('wheel',{
    inserted:function(el){
        el.onmousewheel=function(e){
            // 赋初值
            if(!window.per) window.per=1;
            
            window.per=window.per+(e.deltaY<0?0.1:-0.1);
            window.per=window.per<=0.5?0.5:window.per;
            window.per=window.per>=3.0?3.0:window.per;
            if(window.per>0.5 && window.per<3.0){
                el.style.transform="scale("+window.per+")";
                el.style.transformOrigin=e.offsetX+'px '+e.offsetY+'px';
            }
        }
    }
})

也可以写成局部指令：

拖动（组件局部指令）

directives: {
    drag: {
      inserted:function(el,binding){
        el.onmousedown=function(e){
            e.stopPropagation();
            let disx = e.pageX - el.offsetLeft;
            let disy = e.pageY - el.offsetTop;
            document.onmousemove = function (e){
                e.preventDefault();
                el.style.left = e.pageX - disx+'px';
                el.style.top = e.pageY - disy+'px';
            }
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
                //binding 传参，可忽略
                if(binding && binding.value){
                    binding.value.clientX=parseInt(el.style.left);
                    binding.value.clientY=parseInt(el.style.top);
                }

            }
        }
    }
    }
  }

缩放（组件局部指令）

    wheel:{
      inserted:function(el){
        el.onmousewheel=function(e){
            // 赋初值
            if(!window.per) window.per=1;
            
            window.per=window.per+(e.deltaY<0?0.1:-0.1);
            window.per=window.per<=0.5?0.5:window.per;
            window.per=window.per>=3.0?3.0:window.per;
            if(window.per>0.5 && window.per<3.0){
                el.style.transform="scale("+window.per+")";
                el.style.transformOrigin=e.offsetX+'px '+e.offsetY+'px';
            }
        }
    }
    }

vue 实现流畅拖动效果及自定义拖动指令封装

相关推荐