原生javascript实现拖动元素

最新推荐文章于 2023-10-17 19:40:46 发布

dzyhenry

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： javascript drag

本文链接：https://blog.csdn.net/dzyhenry/article/details/38856773

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍原生javascript实现元素拖动。

思路：

1.首先改变被拖动元素的布局属性，关键是“position:absolue”；

2.捕捉鼠标事件"mousedown","mousemove","mouseup"；

3.当触发"mousedown"时，记录下当前鼠标在元素中的相对位置，_x,_y；

4.紧接着处理"mousemove"事件，通过改变元素的top和left属性来移动元素；

5.当触发"mouseup"时间时，终止拖动。

同时，应考虑代码的封装性和浏览器的兼容性，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>draggable div</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			background-color: #fff;
		}
		
		#drag_div{
			width: 150px;
			height: 150px;
			padding: 10px;
			margin: 10px;
			background-color: #66dd33;
			cursor: move;
		}
	</style>
</head>
</html>
	<body>
		<div id="drag_div"></div>
	</body>
	<script type="text/javascript">

	function Drag () {
		this.initialize.apply(this, arguments);	
	}

	Drag.prototype = {

		// 初始化
		initialize : function (element, options) {
			
			this.element = this.$(element); // 被拖动的对象
			this._x = this._y = 0; // 鼠标在元素中的位置
			this._moveDrag = this.bind(this, this.moveDrag); 
			this._stopDrag = this.bind(this, this.stopDrag);

			// 设置参数
			this.setOptions(options);
			
			// 设置鼠标去“拖”的“柄”对象（注意与被拖动的对象区别）
			this.handle = this.$(this.options.handle);

			// 设置回调函数
			this.onStart = this.options.onStart;
			this.onMove = this.options.onMove;
			this.onStop = this.options.onStop;

			this.handle.style.cursor = "move";

			this.changeLayout();

			// 注册开始拖动事件
			this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag));
		},

		// 改变被拖动对象的布局属性
		changeLayout: function () {
			this.element.style.top = this.element.offsetTop + "px";
			this.element.style.left = this.element.offsetLeft + "px";
			this.element.style.position = "absolute";
			this.element.style.margin = "0";
		},

		startDrag : function (event) {
			var event = event || window.event;

			this._x = event.clientX - this.element.offsetLeft;
			this._y = event.clientY - this.element.offsetTop;

			this.addHandler(document, "mousemove", this._moveDrag);
			this.addHandler(document, "mouseup", this._stopDrag);

			this.preventDefault(event);

			this.handle.setCapture && this.handle.setCapture();

			this.onStart();
		},
		moveDrag : function (event) {
			var event = this.getEvent(event);

			var iTop = event.clientY - this._y;
			var iLeft = event.clientX - this._x;

			this.element.style.top = iTop + "px";
			this.element.style.left = iLeft + "px";

			this.onMove();
		},
		stopDrag : function () {
			
			this.removeHandler(document, "mousemove", this._moveDrag);
			this.removeHandler(document, "mouseup", this._stopDrag);
			this.handle.releaseCapture && this.handle.releaseCapture();

			this.onStop()
	
		},
		setOptions : function (options) {
			this.options = {
				handle: this.element,  //事件对象
				onStart : function () {}, // 开始时回调函数
				onMove : function(){}, // 拖拽时回调函数
				onStop : function(){} // 停止时回调函数
			};
			for(var p in options){
				this.options[p] = options[p];
			}
		},
		$ : function (id) {
			return typeof id === "string" ? document.getElementById(id):id;
		},
		addHandler : function (element, eventType, handler) {
			if(element.addEventListener){
				return element.addEventListener(eventType, handler, false);
			}else{
				return element.attachEvent("on"+eventType, handler);
			}
		},
		removeHandler : function (element, eventType, handler) {
			if(element.removeEventListener){
				return element.removeEventListener(eventType, handler, false);
			}else{
				return element.detachEvent("on" + eventType, handler);
			}
		},
		getEvent: function (event) {
				return event || window.event;
		},
		preventDefault: function (event) {
			if(event.preventDefault){
				event.preventDefault();
			}else{
				event.returnValue = false;
			}
		},
		bind : function  (obj, handler) {
			return function  () {
				return handler.apply(obj, arguments);
			}
		}
	};

	window.onload = function () {
		var drag_div = document.getElementById("drag_div");

		var drag = new Drag(drag_div, {handle: drag_div});
	}

	</script>
</html>