vuedraggable 拖拽 应用 不同列表之间的拖拽

vuedraggable 拖拽 应用 不同列表之间的拖拽

npm install vuedraggable


main.js 文件

import VueDraggable from 'vuedraggable';

Vue.use(VueDraggable);

<template>
  <div>
    <el-row style="width:55%;float: left;" class="model">
      <el-col class="model-box" :span="5" v-for="(item,index) in banks" :key="index">
        <!-- <img src="../../../img/icon-3.png" /> -->
        <div class="name">{{item.name}}</div>
      </el-col>
    </el-row>
    <el-row style="width:40%;float: left;">
      <el-col :span="16">
        <div class="drag-box">
          <div class="drag-box-item">
            <p class="title">银行排序</p>
            <div class="item-title">注：可拖动银行进行排序展示</div>
            <el-row class="leftHeight">
              <el-col :span="3">
                <div v-for="i in banks.length" :key="i" class="drag-num">{{i}}、</div>
              </el-col>
              <el-col :span="21">
                <draggable v-model="banks" :options="dragOptions">
                  <transition-group tag="div" id="banks" class="item-ul">
                    <div v-for="a in banks" :key="a.id" class="drag-list">{{a.name}}</div>
                  </transition-group>
                </draggable>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-form>
          <div class="drag-box">
            <div class="drag-box-item">
              <el-row class="title">
                <el-col :span="14">银行卡片排序</el-col>
                <el-col :span="10">
                  <el-form-item label="选择银行：">
                    <el-select
                      v-model="searchForm.bankId"
                      placeholder="请选择"
                      @change="getCardListByBankId"
                    >
                      <el-option label="全部" value></el-option>
                      <el-option
                        v-for="(item, index) in banks"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="item-title">注：可拖动卡片进行排序展示</div>
              <el-row class="leftHeight">
                <el-col :span="21">
                  <draggable v-model="cardList" :options="dragOptions2">
                    <transition-group tag="div" id="cardList" class="item-ul">
                      <div v-for="c in cardList" :key="c.id" class="drag-list">{{c.name}}</div>
                    </transition-group>
                  </draggable>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="btns text-center">
            <el-button type="primary" class="send" @click.native="sendChange">提交</el-button>
            <el-button @click.native="removeChange">取消</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import draggable from 'vuedraggable';
import { mapGetters } from 'vuex';
import BaseExtend from '@/extends/base.extend';
import OrgSelect from '@/components/OrgSelect';






export default {
  extends: BaseExtend,
  components: {
    OrgSelect,
    draggable
  },
  data() {
    return {
      // 银行列表
      banks: [],
      cardList: [],
      searchForm: {
        bankId: ''
      },
      endBank: [],
      endCard: [],
      // 拖动 参数
      dragOptions: {
        animation: 120,
        scroll: true,
        sort: true,
        group: 'sortlist',
        ghostClass: 'ghost-style'
      },
      // 参数
      dragOptions2: {
        animation: 120,
        scroll: true,
        sort: true,
        group: 'sortCardlist',
        ghostClass: 'ghost-style'
      }
    };
  },
  computed: {
    myHeader: function() {
      return {
        // eslint-disable-next-line
        authToken: window.localStorage.getItem('token')
      };
    }
  },
  created() {
    this.getBank();
  },
  methods: {
    //获取排序银行列表
    getBank: function() {
      this.$api.getDistBankSortList().then(res => {
        if (res.success) {
          this.banks = res.data;
        }
      });
    },
    // 根据银行id获取所属该银行的信用卡类型
    getCardListByBankId: function() {
      this.cardList = [];
      this.$api.getDistCardSortList(this.searchForm).then(res => {
        if (res.success) {
          this.cardList = res.data;
        }
      });
    },
    // 提交
    sendChange: function() {
      const form = {
        card_sort: [],
        bankCardStr: []
      };
      this.banks.forEach((item, index) => {
        item.sort = index + 1;
      });
      this.cardList.forEach((item, index) => {
        item.sort = index + 1;
      });
      form.bankCardStr = JSON.stringify(this.cardList);
      form.bankStr = JSON.stringify(this.banks);
      this.$api.distConfigSetupSort(form).then(res => {
        if (res.success) {
          this.successMessage('修改成功');
        }
      });
    },
    // 取消
    removeChange: function() {
      this.getBank();
    }




  }
};
</script>






<style scoped>
.btns {
  margin-top: 60px;
}
.btns .send {
  margin-right: 30px;
}
.title {
  margin-bottom: 20px;
}
.drag-box {
  padding: 10px 0;
}
.drag-box-item {
  padding: 15px;
  background-color: #eee;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}
.item-title {
  color: #666;
  font-size: 12px;
}
.drag-num {
  font-size: 14px;
  color: #333;
  line-height: 41px;
  margin: 10px 5px 10px 0;
}
.leftHeight {
  max-height: 300px;
  overflow: scroll;
}
.leftHeight::-webkit-scrollbar {
  width: 0;
}
.drag-list {
  font-size: 14px;
  color: #333;
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  border: 1px #e1e4e8 solid;
  /* -webkit-transition: border 0.3s ease-in;
  transition: border 0.3s ease-in; */
}
.drag-list:hover {
  border: 1px solid #20a0ff;
}
.ghost-style {
  display: block;
  color: transparent;
  border-style: dashed;
}
.model {
  margin: 5% 3% 5% 1%;
  padding: 20px;
  border: 1px solid #888888;
  border-radius: 10px;
  width: 30%;
  float: left;
  text-align: center;
}
.model-box {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 5px;
  margin: 0.5% 2% 3% 2%;
  height: 100px;
}
.model-box div.name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>