拖动

最新推荐文章于 2025-05-06 15:41:36 发布

一天要饭生活又开始啦

最新推荐文章于 2025-05-06 15:41:36 发布

阅读量468

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/veryhunger/article/details/12610477

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin:0; padding:0; }
</style>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
</head>
<body>
<div id="myId" class="dragable" style="width:50px; height:50px; background:#f00; position:absolute;"></div>
<div id="myDivId" class="dragable" style="width:50px; height:50px; background:#0f0; position:absolute; left:50px;"></div>
<script type="text/javascript">
var EventUtil = {
	
	addHandler: function(element, type, handler) {
		if(element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if(element.attachEvent) {
			element.attachEvent("on" + type, handler);
		} else {
			element["on" + type] = handler;
		}
	},
	
	removeHandler: function() {
		if(element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if(element.detachEvent) {
			element.detachEvent("on" + type, handler);
		} else {
			element["on" + type] = null;
		}
	},
	
	getEvent: function(event) {
		return event || window.event;
	},
	
	getTarget: function(event) {
		return event.target || event.srcElement;
	},
	
	preventDefault: function(event) {
		if(event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	
	stopPropagation: function(event) {
		if(event.stopPropagation) {
			event.stopPropagation();
		} else {
			event.cancelBubble = true;
		}
	}
}

var DragDrop = function() {
	
	var dragging = null;
	var oppX = 0;
	var oppY = 0;
	
	function EventHandle(event) {
		
		event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		
		switch(event.type) {
			
			case "mousedown":
				EventUtil.preventDefault(event);
				if(target.className.indexOf("dragable") > -1) {
					dragging = target;
					oppX = event.clientX - target.offsetLeft;
					oppY = event.clientY - target.offsetTop;
				}
				break;
			
			case "mousemove":
				EventUtil.preventDefault(event);
				if(dragging != null) {
					dragging.style.left = event.clientX - oppX + "px";
					dragging.style.top = event.clientY - oppY + "px";
				}
				break;
			
			case "mouseup":
				EventUtil.preventDefault(event);
				dragging = null;	
		}
	}
	
	return {
		enable: function() {
			EventUtil.addHandler(document, "mousedown", EventHandle);
			EventUtil.addHandler(document, "mousemove", EventHandle);
			EventUtil.addHandler(document, "mouseup", EventHandle);
		},
		
		disable: function() {
			EventUtil.removeHandler(document, "mousedown", EventHandle);
			EventUtil.removeHandler(document, "mousemove", EventHandle);
			EventUtil.removeHandler(document, "mouseup", EventHandle);
		}
	};
}();

DragDrop.enable();
</script>
</body>
</html>