中文文檔地址:

vue.draggable中文文檔 - itxst.comVue.Draggable是一款基于Sortable.js實(shí)現(xiàn)的vue拖拽插件。支持移動(dòng)設(shè)備、拖拽和選擇文本、智能滾動(dòng)，可以在不同列表間拖拽、不依賴jQuery為基礎(chǔ)、vue 2過渡動(dòng)畫兼容、支持撤銷操作，總之是一款非常優(yōu)秀的vue拖拽組件。https://www.itxst.com/vue-draggable/tutorial.html1.安裝

npm i -S vuedraggable

2.引入

import draggable from 'vuedraggable'

3.使用

?:key="keyDate" 改變?listBak時(shí),刷新圖表顯示文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-627541.html

<template>
  <div>
    <!-- 調(diào)用組件  -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="list" :group="groupA" class="dragBox" animation="100" @end="refreshKay">
            <div v-for="(item, index) in list" :key="index" class="show-li">{{ item.name }}</div>
          </draggable>
        </el-row>
      </el-col>
      <el-col :span="12" :key="keyDate">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="listBak" :group="groupB" animation="100" class="dragBox" @end="refreshKay">
            <el-col v-for="(item, index) in listBak" :key="index" :span="item.width">
              <div @click="showTest(item)">
                <component :is="item.id" v-if="listComponents.includes(item.id)"></component>
              </div>
            </el-col>
          </draggable>
        </el-row>
        '查看順序:' {{listBak}}
      </el-col>
      <el-col :span="8">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名稱">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="寬度">
            <el-input v-model="form.width"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateTest">立即更新</el-button>
        <el-button type="primary" @click="delTest">刪除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入拖拽組件
import draggable from 'vuedraggable'

export default {
  name: 'index',
  components: {
    // 注冊(cè)draggable組件
    draggable,
    China: () => import('@/view/echarts/map/China'),
    Shandong: () => import('@/view/echarts/map/Shandong')
  },
  data() {
    return {
      listComponents: ['Shandong', 'China'],
      listBak: [],
      form: {
        id: '',
        name: '',
        width: 0
      },
      keyDate: 'T',
      list: [
        {
          id: 'China',
          name: '中國(guó)',
          width: 24
        },
        {
          id: 'Shandong',
          name: '山東',
          width: 24
        }
      ],
      groupA: {
        name: 'test',
        pull: true, // 可以拖出
        put: false // 可以拖入
      },
      groupB: {
        name: 'test',
        pull: false,
        put: true
      }
    }
  },
  methods: {
    showTest(param) {
      this.form = JSON.parse(JSON.stringify(param))
    },
    updateTest() {
      this.listBak.forEach(i => {
        if (i.id === this.form.id) {
          i.width = this.form.width
        }
      })
      this.refreshKay()
    },
    delTest() {
      // 獲取元素在數(shù)組的位置
      let num = -1
      for (let i = 0; i < this.listBak.length; i++) {
        let item = this.listBak[i]
        if (item.id === this.form.id) {
          num = i
        }
      }
      // 刪除元素
      if (num !== -1) {
        this.list.unshift(this.form)// 加回原數(shù)組
        this.listBak.splice(num, 1)// 從當(dāng)前數(shù)組刪除
      }
      this.refreshKay()
    },
    refreshKay() { // 刷新整體頁(yè)面
      this.keyDate = 'T' + new Date()
    }
  }
}
</script>

<style scoped>
.dragBox {
  padding: 20px;
  min-height: 300px;
}
.show-li {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
.show-li:hover {
  background-color: #f1f1f1;
  cursor: move;
}

</style>

到了這里，關(guān)于vue的拖拽插件: vue.draggable的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！