vue怎么實現拖動圖片進行排序Vue.Draggable

這篇文章主要介紹了vue怎么實現拖動圖片進行排序Vue.Draggable的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue怎么實現拖動圖片進行排序Vue.Draggable文章都會有所收獲，下面我們一起來看看吧。

拖動圖片進行排序Vue.Draggable

好久沒接觸vue的項目了，最近接到一個vue圖片處理的小項目，有一項需求是要實現拖動圖片就行排序。

接到這個需求之后立馬想到了Vue.Draggable這款基于Sortable.js實現的vue拖拽插件

下面是實現過程 

第一步：安裝Vue.Draggable。兩種方式npm和yarn   （我用的npm）

npm i -S vuedraggable
yarn add vuedraggable

第二步：全局安裝完成之后在main.js中全局引用也行在需要的頁面也用也沒問題 （我因為就一個頁面需要我就單頁面引入的）

<script>
import draggable from "vuedraggable"
export default {
  components: {
    draggable
  }
}
</script>

第三步：安裝和引用都完成了，現在開始使用了。

<template>
  <div class="col">
    <draggable v-model="data" filter=".forbid" animation="300" :move="onMove">
      <transition-group>
        <div v-for="(item, index) in data" :key="index">
          <div class="img-hover">
            <img :src="'http://xxxxx' + item.img"/>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

 注意：

/**
 *代碼中的data為你的數據列表，onMove為你在拖動圖片是觸發的函數方法。
 *transition-group標簽下一定是v-for循環，不然會報錯。
**/

這樣，一個簡單的圖片拖拽排序的簡單demo就完成了。 

項目draggable拖拽移動圖片順序

第一步、導入

npm i vuedraggable

第二步、組件引入

import draggable from 'vuedraggable';

第三步、定義組件

components: { draggable},

第四步、頁面中使用

<template>
  <div class="app-container">
      <div :class="canEdit? 'dargBtn-lock el-icon-unlock': 'dargBtn-lock el-icon-lock' " @click="removeEvent()">{{canEdit? '調整':'鎖定'}}</div>
      <ul class="projset-content">
        <draggable
          :move="onMove"
          :list="imgList"
          handle=".dargBtn"
          :animation="200"
          filter=".undraggable"
        >
          <li v-for="(item, index) in imgList" :key="index" :class="canEdit ? 'draggable' : 'undraggable'">
            <div class="dargBtn">
              <svg-icon icon-class="drag" />
            </div>
            <img :src="item.path" alt="">
            <span>{{item.name}}</span>
          </li>
        </draggable>
      </ul>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  export default {
    components: { draggable},
    data(){
      return{
        canEdit:true,
        imgList: [
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg',
            name: '1',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/26202931_14.jpg',
            name: '2',
          },
          {
            path: 'https://lupic.cdn.bcebos.com/20210629/27788166_14.jpg',
            name: '3',
          }
        ]
      }
    },
    created() {
    },
    mounted(){},
    methods:{
      onMove(relatedContext, draggedContext){
        console.log(relatedContext.relatedContext.list);
      },
      removeEvent (item) {
        if(this.canEdit){
          this.canEdit = false;
        }else{
          this.canEdit = true;
        }
        console.log(this.canEdit);
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container{
    background: #ffffff;
    height: 100%;
    .dargBtn-lock{
      margin: 0px 50px;
      color: #2ea9df;
    }
    .projset-content{
      list-style-type: none;
      position: relative;
      li{
        display: inline-block;
        margin: 10px;
      }
      img{
        width: 141px;
        height: 100px;
      }
      span{
        justify-content: center;
        display: flex;
      }
      .dargBtn{
        position: absolute;
        line-height: 100px;
        text-align: center;
        width: 141px;
        height: 100px;
        display: none;
        color: white;
        background: rgba(101, 101, 101, 0.6);
      }
      .draggable{
        cursor: pointer;
        width: 141px;
        height: 100px;
      }
      .draggable:hover .dargBtn{
        display: block;
      }
    }
  }
</style>

關于“vue怎么實現拖動圖片進行排序Vue.Draggable”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么實現拖動圖片進行排序Vue.Draggable”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。