网站地图    收藏    合作   

主页 > 采坑 > 前端采坑 > javascript常见API采坑 >

js实现类似PS文档拖动以及鼠标事件

来源:未知    时间:2021-05-09 15:02 作者:小飞侠 阅读:

[导读] js实现文档拖动以及鼠标事件 模仿PS等工具页面文档拖动, 思路: 如图所示让父级盒子设置2万宽度,并且控制他们滚动条到 2w/2 的位置。 接下来就是鼠标事件的处理了。 代码如下:...

js实现文档拖动以及鼠标事件


1620538139333080.png


模仿PS等工具页面文档拖动,

思路:

image.png

1620538579335287.png

如图所示让父级盒子设置2万宽度,并且控制他们滚动条到 2w/2 的位置。

接下来就是鼠标事件的处理了。

代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>测试页面拖拽</title>
	<style type="text/css" media="screen">
		body{
			margin: 0px; padding: 0px;
		}
		div, input, textarea, ul {
		    resize: none;
		    outline: 0;
		    font-size: inherit;
		}
		.mind-container {
		    position: relative;
		    overflow: auto;
			-webkit-touch-callout: none; /* iOS Safari */
			-webkit-user-select: none; /* Chrome/Safari/Opera */
			-khtml-user-select: none; /* Konqueror */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
			not supported by any browser */
		}
		.mind-designer {
		    position: relative;
		    /* background-attachment: fixed !important; */
		    /* transition: all 200ms; */
		    -moz-transition: all 200ms;
		    -o-transition: all 200ms;
		}
	</style>
</head>
<body>

<div class="mind-container" id="mind_con" style="height: 969px;">
	<div class="mind-designer" style="width: 20000px; height: 20000px; background: rgb(247, 247, 247); cursor: default;"><div class="topic-container " style="position: absolute; top: 10400px; left: 10400px;">
		元素拖动鼠标事件详解
		<br>
		https://blog.csdn.net/Charissa2017/article/details/103863588
	</div>
</div>

<script>
	window.onload = function(){
		console.log('test')
		obj.init()
	}
	var obj = {
		data:{
			mx:10000,
			my:10000,
			// 鼠标临时参数
			md:{
				x:0,y:0,direction:{ v:'',h:''}
			},
			isDrag: false, //  是否拖动
			elementA:document.querySelector("#mind_con")
		},
		init:function(){
			this.event();
			this.elemnetInit();
		},
		elemnetInit:function(){
			this.data.elementA.scrollTop = this.data.my
			this.data.elementA.scrollLeft = this.data.mx

			document.querySelector('#mind_con').style.height = window.innerHeight + 'px';

			document.querySelector('.topic-container').style.top = this.data.my + document.querySelector('#mind_con').offsetHeight / 2 + 'px'
			document.querySelector('.topic-container').style.left = this.data.mx + document.querySelector('#mind_con').offsetWidth / 2 - document.querySelector('.topic-container').offsetWidth / 2 + 'px'

		},
		event:function(){
			obj.data.elementA.addEventListener('scroll', (e) =>{
				obj.data.my = e.target.scrollTop;
				obj.data.mx = e.target.scrollLeft;
			});
			obj.data.elementA.addEventListener('mousedown', (e) =>{
				obj.data.isDrag = true; //开启拖动
				obj.data.md.x = e.clientX;
				obj.data.md.y = e.clientY;				
			});

			obj.data.elementA.addEventListener('mousemove', (e) =>{
				if (!obj.data.isDrag){
					return
				}
				obj.data.isDrag = true; //开启拖动
				var _mx = e.clientX,
					_my = e.clientY,
					 _msx = _mx - obj.data.md.x,
					 _msy = _my - obj.data.md.y;
				obj.data.md.direction.v = _msx > 0 ? 'left': 'right'
				obj.data.md.direction.h = _msy > 0 ? 'up': 'down'
				obj.data.mx -= _msx
				obj.data.my -= _msy
				obj.setBoxMove(); // 设置盒子移动
				obj.data.md.x = _mx
				obj.data.md.y = _my
			});

			obj.data.elementA.addEventListener('mouseup', (e) =>{
				obj.data.isDrag = false;
			});
			
		},
		setBoxMove:function(){
			this.data.elementA.scrollLeft = obj.data.mx
			this.data.elementA.scrollTop = obj.data.my
		}
	}

</script>
</body>
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论