Vue.Draggable实现拖动功能

先看效果图

HTML

<el-dialog title="邀请用户" :visible.sync="userDialogVisible" width="550px">
      <div class="col-2">
        <div class="form-group">
          <div class="btn-group-vertical buttons" role="group" aria-label="Basic example">
            <el-button size="mini" type="primary" @click="addUserList()">点击加一行el-button>
            <input id="disabled" type="checkbox" v-model="enabled" class="form-check-input" />
            <label class="form-check-label" for="disabled">选中拖动label>
          div>
        div>
      div>
      <div class="col-6">
        <draggable :list="userSubInviteListDTOS" :disabled="!enabled" class="list-group" ghost-class="ghost" :move="checkMove" @start="dragging = true" @end="dragging = false">
          <div class="list-group-item" v-for="(element, index) in userSubInviteListDTOS" :key="index">
            <el-input v-model="element.email" size="mini" type='email' placeholder="请输入Email" style="width: 180px;">el-input>
            <el-select v-model="element.role" placeholder="请选择Role" size="mini" style="width: 180px; margin:0 10px; display: inline-block;">
              <el-option v-for="item in additionalProperties1.filter(items=>items.id !== 0)" :key="item.id" :label="item.name" :value="item.id">
              el-option>
            el-select>
            <el-button @click="DeleteList(index)" size="mini">删除el-button>
          div>
        draggable>
      div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消el-button>
        <el-button type="primary" @click="inviteUserData">邀 请el-button>
      span>
    el-dialog>

JS

1：安装

	npm install vuedraggable

2：引入使用

	import draggable from 'vuedraggable';
	components: {
     
    	draggable,
  	},

3：定义变量

	  userDialogVisible: false,
      enabled: false,
      dragging: false, //禁止拖动
      userSubInviteListDTOS: [{
      email: '', role: 1 }],
      additionalProperties1: [],//下拉框数据

4：…

methods:{
     
	draggingInfo() {
     
      return this.dragging ? 'under drag' : '';
    },
    checkMove: function(e) {
     
      window.console.log('Future index: ' + e.draggedContext.futureIndex);
    },
    /**
     * 子账户列表 邀请用户
     *
     * @author  程纪赢
     */
    addUserList: _loadsh.debounce(function() {
     
      if (this.userSubInviteListDTOS.length < 10) {
     
        this.userSubInviteListDTOS.push({
     
          email: '',
          role: 1,
        });
      } else {
     
        this.$message.warning('最多可添加十条数据！');
      }
    }, 500),
    /**
     * 子账户列表 邀请用户数据删除
     *
     * @author  程纪赢
     */
    DeleteList: _loadsh.debounce(function(index) {
     
      if (this.userSubInviteListDTOS.length !== 1) {
     
        this.userSubInviteListDTOS.splice(index, 1);
      } else {
     
        this.$message.warning('最少保留一条数据');
      }
    }, 500),
    /**
     * 子账户列表 确认邀请
     *
     * @author  程纪赢
     */
    inviteUserData(){
     
		console.log(this.userSubInviteListDTOS)
	}
}

css

html 中好多类名都没用到 不想改 懒得慌 凑活着用吧