【VueDraggablePlus】拖拽功能组件使用三部曲

最新推荐文章于 2024-08-08 08:32:30 发布

m0_65678046

最新推荐文章于 2024-08-08 08:32:30 发布

阅读量253

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65678046/article/details/140604017

版权

第一步下载

npm install vue-draggable-plus --save

第二步引入页面注册使用

<template>
  <div id="app">
    <h4>简易版Vue3拖拽功能【VueDraggablePlus】案例</h4>
    <VueDraggable ref="el" v-model="imgList" :animation="150" style="display: flex;flex-wrap: wrap;padding: 0 10px;border: 1px solid red;" >
      <div  v-for="item in imgList" :key="item.id" style="border:1px solid #afa9a9;cursor: pointer;padding: 2%;margin: 3%;border-radius: 5px">
        {{item.text}}
      </div>
    </VueDraggable>
  </div>
</template>


<script>
import { VueDraggable } from 'vue-draggable-plus'
export default {
  name: 'App',
  components: {
    VueDraggable
  },
  data(){
    return{
      imgList:[
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    }
  }
}
</script>

第三步

保存，看效果！

完事~