实现原理不难：
窗口打开后调用MakeElementDraggable函数。
MakeElementDraggable函数功能如下：
把a的鼠标按下事件的响应函数指向 InitiateDrag，它将重新定位拖拽窗口为鼠标所在位置，然后鼠标移动事件用drag函数响应，鼠标放开事件用drop函数响应，这两个函数自己看吧，就是实现动态拖拽和在指定区域放置id为a的窗口。
代码下载。
页面代码
<!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>Drag and Drop Demo</title> <style type="text/css">
.dragElement 
{}{ background-color:Green; position:absolute; z-index:5000; display: block; padding-top:30px;
} .dropZone {}{ background-color:Blue; width:300px; height:300px; position:absolute; top:100px; right:200px; } .highlightDropZone {}{ background-color:Yellow; } .DefaultDropZoneColor {}{ background-color:Blue; }
</style></head><body> <form id="form1" runat="server"> <div> <div id="a" class="dragElement">拖拽窗口 </div> <div id="dZone" style="position:absolute; top:100px; right:200; 300px; height:300px" class="DefaultDropZoneColor"> 放开区域 1 </div> <div id="dZone2" class="DefaultDropZoneColor" style="position:absolute; top:500px; right:200px; 300px; height:300px"> 放开区域 2 </div> <div id="dZone3" class="DefaultDropZoneColor" style="position:absolute; top:300;right:100px; 100px; height:200px"> 放开区域 3 </div> </div> </form></body></html><script language="javascript" type="text/javascript">var dropZoneArray = new Array(5); dropZoneArray[0] = "dZone";dropZoneArray[1] = "dZone2"; dropZoneArray[2] = "dZone3"; var mouseState = 'up';function MakeElementDraggable(obj) { var startX = 0; var startY = 0; function InitiateDrag(e) { var evt = e || window.event; startX = parseInt(evt.clientX); startY = parseInt(evt.clientY); obj.style.top = parseInt(startY) + 'px'; obj.style.left = parseInt(startX) + 'px'; document.onmousemove = Drag; document.onmouseup = Drop; return false; }function Drop(e) { var evt = e || window.event; // check that if we are in the drop zone if(IsInDropZone(evt)) { document.onmouseup = null; document.onmousemove = null; }}function Drag(e) { // only drag when the mouse is down var dropZoneObject; var evt = e || window.event; obj.style.top = evt.clientY + 'px'; obj.style.left = evt.clientX + 'px'; // Check if we are in the drop Zone if(IsInDropZone(evt)) { dropZoneObject = evt.srcElement; dropZoneObject.className = 'highlightDropZone'; } else { ResetColor(); } }a.onmousedown = InitiateDrag;}function ResetColor() { document.getElementById("dZone").className = 'DefaultDropZoneColor'; document.getElementById("dZone2").className = 'DefaultDropZoneColor'; document.getElementById("dZone3").className = 'DefaultDropZoneColor'; }function IsInDropZone(evt) { var result = false; var obj = evt.srcElement; // iterate through the array and find it the id exists for(i = 0; i < dropZoneArray.length; i++) { if(obj.id == dropZoneArray[i]) { result = true; break; } } return result;}// make the element draggablewindow.onload = MakeElementDraggable(document.getElementById("a")); </script>