色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue實現拖動div

傅智翔1年前8瀏覽0評論

實現拖動 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 的效果。