Vue笔记_03组件_vuedraggable实现拖拽(基于vue)

vue有一个vuedraggable组件可以实现拖拽效果

1.下载

npm install vuedraggable

2.使用vuedraggable组件

• [1]引入

  import draggable from 'vuedraggable'
  

• [2]注册

  • components: {
    　　draggable
    },
    

• [3]使用

  • <draggable v-model="tags" :move="getdata" @update="datadragEnd">
       <transition-group>
           <!-- 标签 -->
        </transition-group>
    </draggable>
    

    • v-model绑定的值为一个数组，当拖拽完成后数据变化之后数据中元素的位置也会对应改变；
    • move事件为拖拽中的事件；
      • 可以在此禁止某些元素拖拽；
        • draggedContext.element里面存储的为元素的属性，可以通过属性判断是否可以拖拽
    • update为拖拽结束的事件
      • 存在参数obj
        • obj.oldIndex为拖拽元素之前的index;
        • obj.newIndex为拖拽元素现在的index;