vue的拖动div_vue2 拖拽div-优快云博客

本文链接：https://blog.youkuaiyun.com/zmyalh/article/details/114921297

vue的拖动div

在这里插入图片描述
双击元素可以拖动

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>字典数据</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>-->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			.ds{
				width: 500px;
				height: 500px;
				background: yellowgreen;
			}
			.cs{
				display: inline-block;
				width: 50px;height: 50px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<template>
				<div>
				<div class="ds"
					@mousedown="down"
				  	@mouseup="up" 
				  	@dblclick="dblclick"
				  	@mousemove="move" 
				  	@mouseleave="out"
				  	@mouseout ="outs" 
				  	@mouseenter="enter" 
				  	@mouseover="enters"  
					>
				  	<div
					class="cs"
					v-for="(item,index) in list" :key="index"
					:style="listcss[index]"
					 @dblclick="dblclicks(index)"
				  	>{{item.name}}</div>
				</div>
				</div>
			</template> 
		</div>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						time:'', 
						list:[{name:"1"},{name:"2"},{name:"3"}],
						listcss:[{left:0,top:0,position:'static',background:'red'},
						{left:0,top:0,position:'static',background:'#00fff3'},
						{left:0,top:0,position:'static',background:'#00ff08'},
						],
						show:false,
						mods:0,
					}
				},
				mounted() {
				},
				methods: {
					 down(e){
					 	console.log("按下")
					 },
					 up(){console.log("抬起")},
					 dblclick(){
					 	console.log("双击")},
					 	dblclicks(val){
					 		this.mods=val;
					 		if(this.show==false){
					    	 this.show=true;
					    }else{
					    	 this.show=false;
					    }
					    console.log(val)
					 	},
					 move(e){
					 	if(this.show==true){
					 		 this.listcss[this.mods].left=e.x+'px';
					 	     this.listcss[this.mods].top=e.y+'px';
					 	     this.listcss[this.mods].position="absolute";
					 	}
					 	console.log(e.x+","+e.y)},
					 out(){console.log("离开")},
					 outs(){console.log("移开")},
					 enter(){console.log("进入")},
					 enters(){console.log("在")},
				}
			})
		</script>
	</body>

</html>