本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下
效果图:
HTML代码:
& lt; div id=昂凶印北?
位置
& lt; br> x:{{瓦尔。x}} & lt; br> y: {{val.y}}
& lt; div v-drag="问" id=巴稀?在//注意这里要通过指令绑定函数将当前元素的位置数据传出来
& lt;/div>
& lt;/div>
JS代码:
Vue.directive(“拖”,//自定义指令
{绑定:函数(el、绑定){
让oDiv=el;//当前元素
让自我=;//上下文
oDiv。onmousedown=function (e) {//鼠标按下,计算当前元素距离可视区的距离
让disX=e。clientX - oDiv.offsetLeft;
让disY=e。clientY - oDiv.offsetTop;
文档。onmousemove=function (e) {//通过事件委托,计算移动的距离
让l=e。clientX - disX;
让t=e。clientY - disY;//移动当前元素
oDiv.style。左=l +“px”;
oDiv.style。顶级=t +“px”;//将此时的位置传出去
binding.value ({x: e.pageX y: e.pageY})
}；
文档。onmouseup=function (e) {
文档。onmousemove=零;
文档。onmouseup=零;
}；
}；
}
}
);
窗口。onload=function () {
让vm=new Vue ({
埃尔:“#箱”,
数据:{
瓦尔:“123”,
风格:{
宽度:100 px,
身高:100 px,
背景:“水”,
位置:“绝对”,
右:“30 px”,
上图:0
}
},
方法:{//接受传来的位置数据,并将数据绑定给数据下的瓦尔
问候(val) {
vm。val=val;
}
},
}）;
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
