Vue和jQuery都是前端開發(fā)非常流行的工具，它們都能輕松實現(xiàn)拖拽效果。下面介紹如何通過這兩個工具來添加拖拽功能。

VUE的拖拽

<template>
<div>
<div v-for="(item, index) in list" 
:key="index" ref="dragEl" 
:style="{ transform: `translate(${item.pos.x}px, ${item.pos.y}px)` }" 
@mousedown="startDragging(item)">{{ item.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
dragging: false,
draggingItem: null,
list: [
{ content: 'item 1', pos: { x: 0, y: 0 }},
{ content: 'item 2', pos: { x: 0, y: 100 }},
{ content: 'item 3', pos: { x: 0, y: 200 }}
]
}
},
methods: {
startDragging(item) {
this.dragging = true;
this.draggingItem = item;
},
onMousemove(evt) {
if (!this.dragging) return;
const el = this.$refs.dragEl[this.list.indexOf(this.draggingItem)];
this.draggingItem.pos.x = evt.pageX - el.offsetWidth / 2;
this.draggingItem.pos.y = evt.pageY - el.offsetHeight / 2;
},
onMouseup(evt) {
if (!this.dragging) return;
this.dragging = false;
this.draggingItem = null;
}
},
mounted() {
document.addEventListener('mousemove', this.onMousemove);
document.addEventListener('mouseup', this.onMouseup);
},
beforeUnmount() {
document.removeEventListener('mousemove', this.onMousemove);
document.removeEventListener('mouseup', this.onMouseup);
}
};
</script>

jQuery的拖拽

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
$(".drag").mousedown(function(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === this) {
isDragging = true;
}
});
$(document).mouseup(function() {
isDragging = false;
});
$(document).mousemove(function(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
$(".drag").css("transform", "translate3d(" + currentX + "px, " + currentY + "px, 0)");
}
});
});
</script>
<style>
.drag {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
<div class="drag"></div>

以上是Vue和jQuery的拖拽實現(xiàn)方法，希望可以對您有所幫助。