拖动
来源：互联网 发布：会计电算化模拟软件 编辑：程序博客网 时间：2024/05/19 20:56
<!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>
