自定義指令v-drag
l 存在時 只能橫向拖拽
t 存在時 只能縱向拖拽
lt都存在時 可以任意方向拖拽拖拽
margin: 0;
padding: 0;
#box)=>=modifiers;
el.addeventlistener("mousedown",handledowncb)
let disx,disy;
function handledowncb(e){
disx=e.offsetx;
disy=e.offsety;
// console.log(disx,disy)
document.addeventlistener("mousemove",handlemovecb);
document.addeventlistener("mouseup",handleupcb);
function handlemovecb(e){
let x=e.clientx-disx;
let y=e.clienty-disy;
if((l&&t) && value){
el.style.left=x+"px";
el.style.top=y+"px";
return;
if(l&&value){
el.style.left=x+"px";
return;
if(t&&value){
el.style.top=y+"px";
return;
function handleupcb(){
document.removeeventlistener("mousemove",handlemovecb);
document.removeeventlistener("mouseup",handleupcb);
let vm=new vue({
data:{
flag:true
注：改變v-drag.l v-drag.t v-drag.l.t即可實現橫向 縱向 任意方向的拖拽
vue 實現文字的拖拽 Vue中實現拖拽
實現思路 使用vue自定義指令directives，監聽滑鼠按下事件，計算按下時目標元素與父元素的距離，最後通過css position absolute left top實現距離改變 父元素需要有寬高，且有position定位 1 vue檔案中實現 使用directives template中使用...
用vue實現拖拽
拖拽問題 解決方法 candrag candrag drag button box v drag.limit candrag div div script vue.directive drag document.addeventlistener mousemove e if y 0 el.style...
Vue 實現元件可拖拽
一 templateclass item v for item,index in items key index draggable true dragstart handledragstart event,item dragover.prevent handledragover event,ite...