vue拖拽功能实现vuedraggable

最新推荐文章于 2024-08-29 15:10:00 发布

好想Z☡zᶻ

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量494

点赞数 6

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_45750213/article/details/135741194

版权

本文介绍了如何在Vue项目中通过npm安装并使用vuedraggable库，展示了如何在HTML中集成draggable组件，以及相关的CSS样式设置，以实现列表项的拖动效果。

摘要由CSDN通过智能技术生成

安装：

npm install vuedraggable --save

引入：

import draggable from 'vuedraggable'
components: { draggable}

html:
<draggable v-model="list"  animation="300" @end="dragEnd($event)" handle=".move">
  <transition-group>
  <div class="listItem"
       v-for="(item,index) in list"
       :key="item.id">
    <div class="itemContent">
       <img width="14px" :src="drag" alt="" class="mr-20 move" >
      ....
   </div> 
</transition-group>
</draggable>