<!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> <title>JS拖动效果</title> <mce:script type="text/javascript"><!-- function DragPanel(Panel,event) { var delayX=event.clientX-parseInt(Panel.style.left); var delayY=event.clientY-parseInt(Panel.style.top);
<head>
<title>JS拖动效果</title>
<mce:script type="text/javascript"><!--
function DragPanel(Panel,event)
{
var delayX=event.clientX-parseInt(Panel.style.left);
var delayY=event.clientY-parseInt(Panel.style.top);
document.attachEvent("onmousemove",HandleMove);
document.attachEvent("onmouseup",HandleUp);
event.cancelBubble=true;
event.returnValue=false;
function HandleMove(e)
{
e=window.event;
Panel.style.left=event.clientX-delayX+"px";
Panel.style.top=event.clientY-delayY+"px";
event.cancelBubble=true;
}
function HandleUp()
{
document.detachEvent("onmousemove",HandleMove);
document.detachEvent("onmouseup",HandleUp);
}
event.cancelBubble=true;
}
// --></mce:script>
</head>
<body>
<div style="position:absolute; width:200px; height:150px; left:100px; top:300px; background-color:Maroon;">
<div style="background-color:Red;" mce_style="background-color:Red;" onmousedown="DragPanel(this.parentNode,event)">Drag Me</div>
</div>
</body>
</html>
拖放不懂吗?drag,drop。不知道吗?两个对象,一个是拖动对象,一个是放置对象。
看一下这个吧 http://demos111.mootools.net/DragDrop
当拖动 到 放置对象上时,放置对象都感觉到。
我初步的判断是通过放置对象的坐标位置来判断的。