vue的拖动div

最新推荐文章于 2024-04-30 15:41:52 发布
最新推荐文章于 2024-04-30 15:41:52 发布
阅读量223 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
zmyalh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
拖动多个div
10-19
div在页面可以随便拖动
vue实现div拖拽互换位置
01-19
本文实例为大家分享了vue实现div拖拽互换位置的具体代码，供大家参考，具体内容如下 template模板 <transition tag=div class=container> <div class=item v-for=(item,index) in items :key=item.key :style=...
vue实现拖动div元素
12-06 842
html： <div id="app1"> <div v-drag class="drag"></div> <div v-drag class="drag"></div> </div> css: .drag{ width: 100px; ...
记录一次vue2项目中拖动div时，div的高度会随着鼠标向上拖动变高
最新发布
lyl_csdn_89的博客
04-30 914
{{ getSuccessCount }}</span>项) 失败(<span class="fail-color">{{ getFailCount }}</span>项)</p><span class="success" v-if="file.status=='success'">上传成功
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
seeeeeeeeeee的博客
07-23 2152
div拖拽功能，弹框拖拽功能汇总，详细注释版本
vue拖拽div
草叶儿的博客
03-16 269
下载安装 yarn add vuedraggable 参考 https://sortablejs.github.io/Vue.Draggable/#/clone http://www.ptbird.cn/vue-draggable-dragging.html 使用 import vuedraggable from 'vuedraggable'; 页面 <template> <div class="test-vuedraggable-box"> <div
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样 这是我最终的实现效果 还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下...
vue2和vue3拖拽移动div
xingchen678的博客
09-28 706
vue2和vue3拖拽移动div
可拖动的div
huangfeng1982712的专栏
04-02 668
 为了以后方便自己使用，所以先记录起来，方便以后的使用和重构此js是基于prototype和scriptaculous的扩展var DragDiv={};DragDiv.Base=Class.create();;DragDiv.Base.prototype={    initialize:function(element,closeElement,showElement,options){   
可拖动的DIV
LE5YO
08-27 500
var __DragId, __eDragSrc, __DragTop, __DragLeft; function __OnDrag(){ var _element = event.srcElement; if(_element.eDrag){
Vue2 _ 实现拖拽功能
热门推荐
Mr.小灰狼_随笔
12-29 1万+
Vue.Draggable 是一款基于 Sortable.js 实现的 Vue 拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖 jQuery 为基础、Vue 2过渡动画兼容、支持撤销操作。
vue页面实现div的拖动
syyYoung的博客
06-02 2282
vue页面上实现div的拖拽移动
VUE通过托拽div边框实现改变div大小
localhost
10-25 1574
VUE通过托拽div边框实现改变div大小
vue实现 可拖拽的div
小鱼干儿的博客
07-16 3565
可拖拽的div 今天发现右下角的一组按钮很挡视线，但是它还就应该放到右下角，所以在想，让它可以拖拽，在挡视线的时候拖走就好了。 这个功能不一定非要vue实现嘿嘿，其实就是这个逻辑，html + css + js 也可以这样做的~ 首先先写好你的那一块东西，调好样式哈，我的是一组按钮： <div class="arrow-container" @mousedown=arrowMove> <Button type="primary" shape="circle" icon="ios-arr
vue - 移动端实现对div的拖动功能
qq_43886365的博客
05-01 2439
主要是改变定位元素的定位值来实现位置的移动；定位值 = 手指滑动中的位置 - 手指刚触摸时候的初始位置 和距离限制；
Vue项目封装div拖动组件，实现div拖拽
qq_46103732的博客
02-06 2147
场景：在pc端项目中会碰到弹框后多个页面重叠的场景，类似于电脑打开多个文件夹，这时想要同时完整的展示两个页面的内容，就可以拖动页面，改变位置。很多教程都是使用自定义方法在单个组件中使用，本文带大家在Vue项目中封装一个拖拽div的方法，注册全局使用。使用，在需要实现拖拽的div标签上直接加上 v-drag 即可，无需再单独引入。在src下的util文件夹下创建 drag.js文件，存放实现拖拽效果的代码。到此在Vue中实现div拖拽的步骤就结束了，需要的小伙伴快去试试吧！在main.js中注册方法。
vue中可以移动div的 效果
qq_44161703的博客
10-12 945
【代码】vue中可以移动div的 效果。
vue拖拽div边框调整大小卡顿如何解决
05-26
Vue拖拽div边框调整大小卡顿可能是由于频繁地重新渲染元素造成的。为了解决这个问题，可以考虑使用Vue的指令来实现拖拽调整大小的功能，而不是在模板中直接绑定事件。另外，可以通过debounce或throttle函数来限制触发频率，减少重复渲染的次数，从而提高性能。 以下是一个简单的示例代码： ```html <div v-dragresize="{handler: onResize}"> <!-- content --> </div> ``` ```javascript Vue.directive('dragresize', { bind: function (el, binding, vnode) { let handler = binding.value.handler; let debounce = binding.value.debounce || 100; let throttle = binding.value.throttle || 0; let startX = 0; let startY = 0; let startW = 0; let startH = 0; let resizeHandler = function (e) { let dx = e.clientX - startX; let dy = e.clientY - startY; let newW = startW + dx; let newH = startH + dy; if (newW < 0) newW = 0; if (newH < 0) newH = 0; handler({width: newW, height: newH}); }; let mouseDownHandler = function (e) { startX = e.clientX; startY = e.clientY; startW = el.clientWidth; startH = el.clientHeight; document.addEventListener('mousemove', resizeHandler); document.addEventListener('mouseup', mouseUpHandler); }; let mouseUpHandler = function (e) { document.removeEventListener('mousemove', resizeHandler); document.removeEventListener('mouseup', mouseUpHandler); }; el.addEventListener('mousedown', debounce ? _.debounce(mouseDownHandler, debounce) : mouseDownHandler, throttle); } }); new Vue({ el: '#app', data: { width: 200, height: 200 }, methods: { onResize: function ({width, height}) { this.width = width; this.height = height; } } }); ``` 在这个示例中，我们定义了一个名为`v-dragresize`的指令，并将一个名为`onResize`的方法作为参数传递给它。当用户在元素上按下鼠标时，我们记录下当前的鼠标位置和元素的宽高，并将一个`mousemove`事件绑定到`document`上。在`mousemove`事件处理程序中，我们计算出当前鼠标位置与起始位置之间的差值，并根据差值调整元素的宽高。最后，我们将新的宽高值作为参数传递给`onResize`方法。 注意，我们使用了`_.debounce`函数来限制`mousedown`事件的触发频率。这样可以防止用户快速点击元素时频繁地触发重复渲染。你需要在使用这个指令时将`lodash`库引入你的项目中，或者使用自己的`debounce`函数来代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值