<!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>
拖动
最新推荐文章于 2023-12-05 01:36:46 发布