<!DOCTYPE html>
<html>
<head>
	<title>测试页面拖拽</title>
	
</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>

</body>
</html>
		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;
		}
	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
		}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.