## 在vue项目中使用awe-dnd插件实现图片拖拽排序

最新推荐文章于 2024-09-01 07:23:03 发布

初入前端的小白

最新推荐文章于 2024-09-01 07:23:03 发布

阅读量786

点赞数 2

文章标签： vue.js css3 javascript

本文链接：https://blog.csdn.net/once0307/article/details/107663528

版权

首先我这里使用的是npm安装

npm install awe-dnd --save

引入awe-dnd插件
在main.js中引入

import VueDND from 'awe-dnd'
Vue.use(VueDND)

以下是我写的一个小案例

<template>
  <div class="img-list">
    <div
      class="img-item"
      v-for="item in images" v-dragging="{ item: item, list: images, group: 'img' }"
      :key="item.text"
    >
      <img :src="item.img" alt="" class="img"> 
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        images: [{
          text: "A",
          img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3125526008,3010441145&fm=26&gp=0.jpg"
        }, {
          text: "B",
          img:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1009059359,1206235575&fm=26&gp=0.jpg"
        }, {
          text: "C",
          img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2085287614,269627754&fm=26&gp=0.jpg"
        }, {
          text: "D",
          img:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2584746388,2005053369&fm=26&gp=0.jpg"
        }, {
          text: "E",
          img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2775070417,3470526085&fm=26&gp=0.jpg"
        }, {
          text: "F",
          img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=389431155,2829840724&fm=26&gp=0.jpg"
        }, {
          text: "G",
          img:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2932210289,3019731886&fm=26&gp=0.jpg"
        }, {
          text: "H",
          img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2398504332,2389922555&fm=26&gp=0.jpg"
        }, {
          text: "I",
          img:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2325202659,1638716026&fm=26&gp=0.jpg"
        }]
      }
    },
    mounted () {
      this.$dragging.$on('dragged', ({ value }) => {
        console.log(value.item)
        console.log(value.list)
        // console.log(value.otherData)
      })
      this.$dragging.$on('dragend', () => {
        //此处是拖动完成后鼠标松开时触发的事件
      })
    }
  }
</script>
<style >
.img{
    width: 300px;
    height: 300px;
    transition: 1s;
}
.img:hover{
     -ms-transform: scale(1.5);
     -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
</style>

使用过程中参考https://www.xfei.me/index.php?c=article&id=132
v-dragging="{ item: item, list: images, group: ‘img’ ，otherData: otherData }"
但是otherData我没理解具体作用，还希望各位前辈能解惑