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

vue

最近在项目上遇到了图片拖动的需求,自己做了好久效果都不怎么好,最后参考了 vue自定义指令" title="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\';

}

}

}

}

 [在线预览地址](https://codesandbox.io/s/vigilant-mopsa-zw29pw)

以上是 vue 实现流畅拖动效果及自定义拖动指令封装 的全部内容, 来源链接: utcz.com/z/378491.html

回到顶部