vue2拖拽功能组件 vue.draggable拖拽插件多功能拖拽

卑信－吾天

已于 2023-10-17 10:53:26 修改

阅读量2.3k

点赞数 2

分类专栏： vue 拖拽组件 element 文章标签： vue.js javascript 前端

于 2023-10-16 18:05:49 首次发布

本文链接：https://blog.csdn.net/weixin_56718509/article/details/133863083

版权

介绍：vue2拖拽插件，一对一拖拽，一个格子只有一个数据，当然也可以多个（多个更简单）各种拖拽吧。先看gif格式的动态图片，

先介绍插件（不会介绍必定插件不是我写的我只是用）：我看的这个文档还挺详细的

中文地址vue.draggable中文文档 - itxst.com

npm下载
```
npm install vuedraggable
```

那个页面要用在那个页面做引入

import draggable from 'vuedraggable' // 引入

components: {draggable},// 注册

最基础的简单使用（里面有不算详细的介绍）（这里只介绍了一个因为我感觉有很多东西需要咱们自己看文档，我么办法一个个介绍，主要是简单啊）

<div class="itxst">
	<div class="col">
		<div class="title">A组</div>
		<!-- 
		<transition-group>标签不知道干啥用的带上跟不带我没发现什么区别
		！！ 切记 <draggable>或者说<transition-group>标签下面只能单纯的一个div循环出来别瞎写不然报错！！
		！只能写一个div让他循环就行了！
		v-model表示数据源 (不必多说)
		group 这个想象成一个组  相同的组之间才可以相互拖拽
		animation 是过渡动画
		。。。还有不少东西，不过基础的够用了，需要更多的请查看官网快速入门里面的介绍
		-->
		<draggable v-model="arr1" group="site" animation="300">
			<transition-group>
				<div class="item" v-for="item in arr1" :key="item.id">{
    {item.name}}</div>
				<div class="item">0</div>
			</transition-group>
		</draggable>
	</div>
	<div class="col">
		<div class="title">B组（本组不能拖入A组）</div>
		<draggable v-model="arr2" group="site" animation="100">
			<transition-group>
				<div class="item" v-for="item in arr2" :key="item.id">{
    {item.name}}</div>
			</transition-group>
		</draggable>
	</div>
</div>

<script>
	import draggable from 'vuedraggable'
	export default {
		components: {draggable,},
		data() {
			return {
				arr1: [{id: 1,name: 'name1'},
					{id: 2,name: 'name2'},
					{id: 3,name: 'name3'},
					{id: 4,name: 'name4'}
				],
				arr2: [],
			};
		},
		methods: {}
	}
</script>
<style>
	.itxst {margin: 10px;}
	.title {padding: 6px 12px;}
	.col {
		width: 40%;
		flex: 1;
		padding: 10px;
		border: solid 1px #eee;
		border-radius: 5px;
		float: left;
	}
	.col+.col {margin-left: 10px;}
	.item {
		padding: 6px 12px;
		margin: 0px 10px 0px 10px;
		border: solid 1px #eee;
		background-color: #f1f1f1;
	}
	.item:hover {background-color: #fdfdfd;cursor: move;}
	.item+.item {border-top: none;margin-top: 6px;}
</style>

基础的已经没什么了（带你入个门而已别的可以看官网就行）。我介绍一下我写的吧比较复杂一点（不想听可以直接复制代码纯前端的demo vue2+Element写的别的框架的话直接改el-即可），我这边业务需求是有三个数据源，患者+两个设备（都是独立的），并且每个框框只能放一条数据。这样的话就有点麻烦用到了动态的group（代码里面有写）一个动态里面的name对应一个静态的。并且在动态的里面可以设置是否能拖进去或者拖出来.....（累了直接看代码吧，有不足请指教，谢谢）

纯前端demo，只要安装了插件就能用

<template>
	<div style="display: flex;padding: 10px;">
		<div class="patient" style="">
			<div class="tetx_nav">患者</div>
			<div class="nav">
				<div class="text">待分配</div>
				<div class="oveCC">
					<draggable v-model="userList" group="user" animation="300">
						</transition-group>
						<div class="list" v-for="(item,ind) in userList" :key="ind" @click="userItem(item)" @mousedown="startDragging"
							@mouseup="stopDragging" @dragstart="startDragging" @dragend="stopDragging">
							<div class="list_info">
								<svg class="icon" aria-hidden="true">
									<use v-if="item.xb" xlink:href="#icon-portrait"></use>
									<use v-else xlink:href="#icon--man-"></use>
								</svg>
								<span class="list_name">{
    {item.name}}</span>
								<span>{
    {item.xb?'女':'男'}}</span>
								<span>{
    {item.age}}岁</span>
							</div>
							<div class="list_time">
								<span>{
    {item.time}}</span>
								<span>开始监护</span>
							</div>
						</div>
						</transition-group>
					</draggable>
				</div>
			</div>
		</div>