directives:{
drag(el,binding){
var oDiv =el;oDiv.onmousedown = function(e){
e.preventDefault();
e.stopPropagation();
var disX = e.offsetX;
var disY = e.offsetY;
var locX=binding.value.item.lx;
var locY=binding.value.item.ly
document.onmousemove = function(e){
e.preventDefault();
e.stopPropagation();
var x=(e.pageX-disX-$('#svg').offset().left)/binding.value.ratio+locX;
var y=(e.pageY-disY-$('#svg').offset().top)/binding.value.ratio+locY;
binding.value.setLocal(x,y,binding.value.item)
};
document.onmouseup = function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
}
},
},
methods:{
setLocal(x,y,item){
item.lx=x;
item.ly=y;
}
}
注意:ratio为svg中viewbox实际与实际svg标签大小的比例,locX,locY为图形的起始位置,setLocal为记录图形的移动到的位置,方便下一次移动