原生javascript实现拖动元素

本文介绍原生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>
  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值