vue实现拖拽吸附
Vue 实现拖拽吸附功能
使用 vue-draggable 库
安装 vuedraggable 库，适用于列表拖拽吸附场景：
npm install vuedraggable示例代码：
<template>
<draggable
v-model="list"
:options="{ animation: 150, ghostClass: 'ghost' }"
@end="onDragEnd">
<div v-for="item in list" :key="item.id" class="item">
{{ item.text }}
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
list: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
}
},
methods: {
onDragEnd() {
console.log('吸附位置更新完成')
}
}
}
</script>
<style>
.ghost {
opacity: 0.5;
}
.item {
margin: 5px;
padding: 10px;
background: #f0f0f0;
}
</style>原生实现拖拽吸附
通过 HTML5 拖拽 API 实现基础吸附功能：
<template>
<div
class="draggable-item"
draggable="true"
@dragstart="dragStart"
@dragend="dragEnd">
拖拽元素
</div>
<div
class="drop-zone"
@dragover.prevent
@drop="drop">
吸附区域
</div>
</template>
<script>
export default {
methods: {
dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id)
},
drop(e) {
const id = e.dataTransfer.getData('text/plain')
const draggable = document.getElementById(id)
e.target.appendChild(draggable)
},
dragEnd() {
// 吸附完成后的处理
}
}
}
</script>
<style>
.draggable-item {
width: 100px;
height: 100px;
background: lightblue;
cursor: move;
}
.drop-zone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
}
</style>网格吸附实现
添加磁吸效果，使元素对齐网格：
// 在 dragEnd 方法中计算最近网格点
dragEnd(e) {
const gridSize = 20
const x = Math.round(e.clientX / gridSize) * gridSize
const y = Math.round(e.clientY / gridSize) * gridSize
e.target.style.left = `${x}px`
e.target.style.top = `${y}px`
}使用 interact.js 实现高级吸附
安装交互增强库：
npm install interactjs示例代码：
import interact from 'interactjs'
export default {
mounted() {
interact('.draggable')
.draggable({
modifiers: [
interact.modifiers.snap({
targets: [
interact.createSnapGrid({ x: 30, y: 30 })
]
})
]
})
.on('dragmove', (event) => {
const target = event.target
target.style.transform = `translate(${target.x + event.dx}px, ${target.y + event.dy}px)`
})
}
}边界限制处理
防止元素被拖出容器：
// 在 dragEnd 方法中添加边界检查
const container = document.querySelector('.container')
const containerRect = container.getBoundingClientRect()
const elementRect = e.target.getBoundingClientRect()
if (elementRect.left < containerRect.left) {
e.target.style.left = '0px'
}
if (elementRect.top < containerRect.top) {
e.target.style.top = '0px'
}性能优化建议
对于复杂场景建议使用 CSS transform 代替 top/left 定位：
// 代替直接修改 style.left/top
element.style.transform = `translate3d(${x}px, ${y}px, 0)`添加节流处理高频拖拽事件：
import { throttle } from 'lodash'
methods: {
onDrag: throttle(function(e) {
// 处理逻辑
}, 50)
}
