Vue.Draggable实现拖动功能

最新推荐文章于 2024-08-20 09:21:23 发布

等风也在等着你

最新推荐文章于 2024-08-20 09:21:23 发布

阅读量602

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44860425/article/details/106546510

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

先看效果图
在这里插入图片描述

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 中好多类名都没用到不想改懒得慌凑活着用吧

<style lang="scss" scoped>
	.buttons {
	  margin-top: 5px;
	}
	.ghost {
	  opacity: 0.5;
	  background: #c8ebfb;
	}
	.form-check-input {
	  margin-left: 10px;
	}
	.list-group-item {
	  /* width: 200px; */
	  padding: 10px;
	  margin: 10px 0 10px 0;
	  cursor: all-scroll;
	  background: aliceblue;
	}
</style>