vue.draggable move 自定义控制那些元素不允许拖拽

最新推荐文章于 2025-10-24 09:47:11 发布

原创最新推荐文章于 2025-10-24 09:47:11 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

本文介绍了如何在 Vue.js 中使用 draggable 组件创建一个可拖拽的列表，并通过 onMove 回调函数实现特定元素禁止拖拽的功能。示例代码展示了如何定义数据数组和拖拽行为的控制逻辑。

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div>自定义控制不允许拖拽</div>
<div class="col">
 <draggable v-model="arr1" animation="300"  :move="onMove">
    <transition-group>
     <div v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return {  
      //定义要被拖拽对象的数组
      arr1:[
            { id: 5, name: 'www.google.com' },
            { id: 4, name: 'www.taobao.com（不允许拖拽）' }
        ] 
    };
  },
  methods: { 
      //move回调方法
       onMove(e,originalEvent){ 
         //不允许拖拽
         if (e.draggedContext.element.id == 4) return false;
         return true;
      },  
  },
};
</script>