<html> <body style="margin:0px;"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <div id="drag" style="100px; height:100px; background-color:red; z-index:1"></div> <div id="drop" style="200px; height:200px;background-color:blue; top:100px; position:absolute;"></div> <script> var ev , dragObj = null , dragpos , tArr = [] , oriLoc = {} , canMove = true; Number.prototype.NaN0 = function(){ return isNaN(this) ? 0 : this; }; function mouseMove(ev){ ev = ev || window.event; var mp = getEvLoc(ev); if(dragObj && canMove){ dragObj.style.position = 'absolute'; dragObj.style.top = mp.y - dragpos.y; dragObj.style.left = mp.x - dragpos.x; } } function mouseDown(ev){ ev = ev || window.event; var t = ev.target || ev.srcElement; if( t.id == 'drag' ){ dragObj = t; canMove = true; dragpos = getOffset(t ,ev); return false; } } function getOffset( t, ev ){ var po = getEvLoc( ev ); oriLoc = getPosition( t ); return {x: (po.x - oriLoc.x), y: (po.y - oriLoc.y) }; } function mouseUp(ev){ if(!dragObj) return false; ev = ev || window.event; var mp = getEvLoc(ev) , canDrop = false; for(var i in tArr){ var tempTar = tArr[i]; var tp = getPosition(tArr[i]); var tw = tempTar.offsetWidth; var th = tempTar.offsetHeight; if( mp.x > tp.x && mp.x < (tp.x + tw) && mp.y > tp.y && mp.y < (tp.y + th) ){ canDrop = true; } } if(!canDrop){ canMove = false; dragObj.style.position = 'relative'; dragObj.style.top = oriLoc.y; dragObj.style.left = oriLoc.x; } dragObj = null; return false; } function getEvLoc( ev ){ if(ev.pageX || ev.pageY){ return { x:ev.pageX, y: ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function getPosition( e ){ var left = 0; var top = 0; while (e.offsetParent){ left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top}; } function addDropTarget( obj ){ tArr.push(obj); } addDropTarget(document.getElementById('drop')); document.onmousedown = mouseDown; document.onmousemove = mouseMove; document.onmouseup = mouseUp; </script> </body> </html>
后续功能做成插件形式~