實現拖動 div 一般需要用到鼠標事件,Vue.js 通過綁定事件實現 DOM 監聽,再通過 computed 實現計算屬性監聽數據變化,最后使用指令實現操作 DOM。
首先,在 HTML 中添加draggable
屬性,使元素可拖動。
<div id="draggable" draggable="true"></div>
然后,在 Vue 實例中添加數據屬性,并監聽鼠標事件,記錄鼠標位置及元素位置。
new Vue({ el: '#app', data: { dragging: false, x: 0, y: 0, offsetX: 0, offsetY: 0 }, methods: { handleMouseDown: function(event) { this.dragging = true; this.offsetX = event.clientX - this.x; this.offsetY = event.clientY - this.y; }, handleMouseMove: function(event) { if (this.dragging) { this.x = event.clientX - this.offsetX; this.y = event.clientY - this.offsetY; } }, handleMouseUp: function() { this.dragging = false; } } });
接著,在 HTML 中綁定事件,并將計算屬性與元素樣式綁定。
<div id="app"> <div id="draggable" draggable="true" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" :style="{ left: x + 'px', top: y + 'px' }"> </div> </div>
最后,優化代碼,將鼠標事件抽象為指令,使代碼更具可讀性。
Vue.directive('drag', { bind: function(el, binding) { var x = 0, y = 0, dragging = false, offsetX = 0, offsetY = 0; el.addEventListener('mousedown', function(event) { dragging = true; offsetX = event.clientX - x; offsetY = event.clientY - y; }); el.addEventListener('mousemove', function(event) { if (dragging) { x = event.clientX - offsetX; y = event.clientY - offsetY; el.style.left = x + 'px'; el.style.top = y + 'px'; } }); el.addEventListener('mouseup', function() { dragging = false; }); } }); new Vue({ el: '#app' });
使用指令后,只需要在 HTML 中添加v-drag
屬性即可調用指令。
<div id="app"> <div id="draggable" v-drag></div> </div>
通過以上步驟,我們成功地實現了通過鼠標拖動 div 的效果。