vuedraggable限制拖拽范围
90浏览 · 2023-09-09 16:10:35
要限制vuedraggable的拖拽范围，可以使用`drag`事件和`cancel`方法来实现。具体做法如下：
1. 在vuedraggable中[添加](https://geek.csdn.net/educolumn/4d4bec229f163522438e69abc8681710?spm=1055.2569.3001.10083)`@drag`事件，监听拖拽事件，并保存当前拖拽元素的位置[信息](https://geek.csdn.net/educolumn/4b7516410bb8585d5db30bb2e9a69b47?spm=1055.2569.3001.10083)。
<draggable v-model="list" @drag="onDrag">
<!-- ... -->
</draggable>
<script>
export default {
data() {
return {
list: [],
drag[pos](https://geek.csdn.net/educolumn/0399089ce1ac05d7729a569fd611cf73?spm=1055.2569.3001.10083): null // 保存拖拽元素的位置[信息](https://geek.csdn.net/educolumn/4b7516410bb8585d5db30bb2e9a69b47?spm=1055.2569.3001.10083)
methods: {
onDrag(evt) {
this.drag[pos](https://geek.csdn.net/educolumn/0399089ce1ac05d7729a569fd611cf73?spm=1055.2569.3001.10083) = { x: evt.clientX, y: evt.clientY };
</script>