请教个关于可拖动div在IE下的问题

astrum 2007-02-11 12:32:59

先贴代码：
--------------------------------------
<!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" />
<title>drag</title>
<style type="text/css">
body{
margin:0px;
font-size:12px;
color:#666;
}
.item{
width:100px;
height:100px;
border:1px solid #ccc;
position:absolute;
background-color:#eee;
}
</style>
<script type="text/javascript">
var global = document;

var EventUtil = { };
EventUtil.getEvent = function()
{
if(window.event)
return this.eventFormat(window.event);
else
return this.getEvent.caller.arguments[0];
}
EventUtil.eventFormat = function(oEvent)
{
if(!oEvent.target) oEvent.target = oEvent.srcElement;
if(!oEvent.eventPhase) oEvent.eventPhase = 2;
if(!oEvent.pageX) oEvent.pageX = oEvent.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
if(!oEvent.pageY) oEvent.pageY = oEvent.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
if(!oEvent.charCode) oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
if(!oEvent.stopPropagation) oEvent.stopPropagation = function()
{
window.event.cancelBubble = true;
};
return oEvent;
}

EventUtil.addEventListener = function(targetObject, eventType, eventHandle)
{
if(window.addEventListener)
{
targetObject.addEventListener(eventType, eventHandle, false);
}
else if(window.attachEvent)
{
targetObject.attachEvent("on" + eventType, eventHandle);
}
else
{
targetObject["on" + eventType] = eventHandle;
}
}
EventUtil.removeEventListener = function(targetObject, eventType, eventHandle)
{
if(window.removeEventListener)
{
targetObject.removeEventListener(eventType, eventHandle, false);
}
else if(window.detachEvent)
{
targetObject.detachEvent("on" + eventType, eventHandle);
}
else
{
targetObject["on" + eventType] = null;
}
}
var drag = {
currentItem : null,
differentX : 0,
differentY : 0
}

drag.dragStart = function(dragTarget, oEvent)
{
EventUtil.addEventListener(global, "mousemove", handle.mouseMoveHandle);
EventUtil.addEventListener(global, "mouseup", handle.mouseUpHandle);
this.currentItem = dragTarget;
var mouseX = oEvent.pageX;
var mouseY = oEvent.pageY;
var targetX = parseInt(this.currentItem.style.left) || 0;
var targetY = parseInt(this.currentItem.style.top) || 0;
this.differentX = mouseX - targetX;
this.differentY = mouseY - targetY;
}
drag.draging = function(oEvent)
{
var mouseX = oEvent.pageX;
var mouseY = oEvent.pageY;
this.currentItem.style.left = (mouseX - this.differentX) + "px";
this.currentItem.style.top = (mouseY - this.differentY) + "px";
}
drag.dragEnd = function()
{
EventUtil.removeEventListener(global, "mousemove", handle.mouseMoveHandle);
EventUtil.removeEventListener(global, "mouseup", handle.mouseUpHandle);

this.currentItem = null;
this.differentX = 0;
this.differentY = 0;
}

var handle = {
eventFilter : function()
{
var oEvent = EventUtil.getEvent();
var o = oEvent.target;
while(o)
{
if(o.className == "item")
{
drag.dragStart(o, oEvent);
break;
}
o = o.parentNode;
}
}
,
mouseMoveHandle : function()
{
var oEvent = EventUtil.getEvent();
drag.draging(oEvent);
}
,
mouseUpHandle : function()
{
drag.dragEnd();
}
}
EventUtil.addEventListener(document, "mousedown", handle.eventFilter);

</script>
</head>

<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</body>
</html>
-----------------------------------------------------------

在firefox/opera都正常，但在IE下，有时拖得正常，有时拖动后就定住了。。
firefox下如果div里包含图片，在图片上拖动有时也会如此。。

请问下，是何原因呢？？小弟百思不得其解。。。

...全文