實現思路： 使用vue自定義指令directives， 監聽滑鼠按下事件，計算按下時目標元素與父元素的距離，最後通過css position-absolute : left / top實現距離改變
(父元素需要有寬高，且有position定位)
1、vue檔案中實現
使用directives
template中使用指令
script中定義指令
methods: {},
directives: ;
odiv.onmousedown = function (e) else if (l > (pbox.clientwidth - odiv.clientwidth))
if (t < 0) else if (t > (pbox.clientheight - odiv.clientheight))
// 移動當前元素
odiv.style.left = l + "px";
odiv.style.top = t + "px";
};document.onmouseup = function (e) ;
// 防止黏連
return false;
};},
},
建立directives.js 在入口檔案引入 並vue.use，實現**與檔案內實現基本相同。
vue官方directive使用方法
專案中使用
在入口檔案引入並使用
上述步驟完成後可直接在頁面檔案中使用
3、小坑
需注意如果css使用了transition過渡, 不能使用all 因為 left / top 改變也會發生過渡 導致發生拖拽延遲效果
如果需要滑鼠hover後有動畫效果 可以分別寫出來
栗子
vue 原型設計 拖拽 Vue實現簡單的拖拽效果
自定義指令v drag l 存在時 只能橫向拖拽 t 存在時 只能縱向拖拽 lt都存在時 可以任意方向拖拽拖拽 margin 0 padding 0 box modifiers el.addeventlistener mousedown handledowncb let disx,disy func...
用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...