<html>
<head><title>System Drag And Drop Example</title>
<script type="text/javascript">
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);
var isOpera = sUserAgent.indexOf("Opera")>-1;
var isWin = (navigator.platform == "Win32") || (navigator.platform =- "Windows");
var isIE = sUserAgent.indexOf("compatible")>-1 && sUserAgent.indexOf("MSIE")>-1 && !isOpera;
var EventUtil = new Object;
EventUtil.addEventHandler = function(oTarget,sEventType,fnHandler)
{
if(oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler,false);
}
else if(oTarget.addachEvent)
{
oTarget.attachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=fnHandler;
}
};
EventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler)
{
if(oTarget.removeEventListener)
{
oTarget.removeEventListener(sEventType,fnHandler,false);
}
else if(oTarget.detachEvent)
{
oTarget.detachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=null;
}
};
EventUtil.formatEvent=function(oEvent)
{
if(isIE && isWin)
{
oEvent.charCode = (oEvent.type == "keypress")?oEvent。keyCode:0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode>0);
oEvent.pageX = oEvent.clientX+document.body.scrollLeft;
oEvent.pageY = oEvent.clientY +document.body.scrollTop;
oEvent.preventDefault = function()
{
this.returnValue = false;
};
if(oEvent.type =="mouseout")
{
oEvent.relatedTarget = oEvent.toElement;
}
if(oEvent.type=="mouseover")
{
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function()
{
this.cancleBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
};
EventUtil.getEvent= function()
{
if(window.event)
{
return this.formatEvent(window.event);
}
else
{
return EventUtil.getEvent.caller.arguments[0];
}
};
var iDiffX = 0;
var iDiffY = 0;
function handleMouseMove()
{
var oEvent = EventUtil.getEvent();
var oDiv =document.getElementById("div1");
oDiv.style.left = oEvent.clientX-iDiffX;
oDiv.style.top = oEvent.clientY-iDiffY;
}
function handleMouseDown()
{
var oEvent = EventUtil.getEvent();
var oDiv =document.getElementById("div1");
iDiffX = oEvent.clientX-oDiv.offsetLeft;
iDiffY = oEvent.clientY-oDiv.offsetTop;
EventUtil.addEventHandler(document.body,"mousemove",handleMouseMove);
EventUtil.addEventHandler(document.body,"mouseup",handleMouseUp);
}
function handleMouseUp()
{
EventUtil.removeEventHandler(document.body,"mousemove",handleMouseMove);
EventUtil.removeEventHandler(document.body,"mouseup",handleMouseUp);
}
</script>
<style type="text/css">
#div1
{
background-color:red;
height:100px;
100px;
position:absolute;
}
</style>
</head>
<body >
<p>Try moving your mouse around.</p>
<p>
<div id="div1" onmousedown="handleMouseDown()"></div>
</p>
</body>
</html>