用javascript进行拖拽4(转)

运行代码框
<script> var iMouseDown = false; var dragObject = null; Number.prototype.NaN0=function(){return isNaN(this)?0:this;} // Demo 0 variables var DragDrops = []; var curTarget = null; var lastTarget = null; function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){ dragObject = this; mouseOffset = getMouseOffset(this, ev); return false; } } function getMouseOffset(target, ev){ ev = ev || window.event; var docPos = getPosition(target); var mousePos = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; } 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 mouseCoords(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 mouseDown(ev){ ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){ return false; } } function mouseUp(ev){ //dragObject = null; if(dragObject){ ev = ev || window.event; var mousePos = mouseCoords(ev); var dT = dragObject.getAttribute('droptarget'); if(dT){ var targObj = document.getElementById(dT); var objPos = getPosition(targObj); if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){ var nSrc = targObj.getAttribute('newSrc'); if(nSrc){ dragObject.src = nSrc; setTimeout(function(){ if(!dragObject || !dragObject.parentNode) return; dragObject.parentNode.removeChild(dragObject); dragObject = null; }, parseInt(targObj.getAttribute('timeout'))); } else { dragObject.parentNode.removeChild(dragObject); } } } } dragObject = null; iMouseDown = false; } function mouseMove(ev){ ev = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false; } function addDropTarget(item, target){ item.setAttribute('droptarget', target); } document.onmousemove = mouseMove; document.onmousedown = mouseDown; document.onmouseup = mouseUp; window.onload = function (){ makeDraggable(document.getElementById('DragImage9')); makeDraggable(document.getElementById('DragImage10')); makeDraggable(document.getElementById('DragImage11')); makeDraggable(document.getElementById('DragImage12')); addDropTarget(document.getElementById('DragImage9'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage12'), 'TrashImage1'); } </script> <FIELDSET id=Demo6 style="HEIGHT: 70px"><h3>Demo - Drag any image onto the trashcan</h3><IMG id=TrashImage1 src="/articleimg/2006/07/3791/drag_drop_trash.gif" timeout="600" newSrc="/articleimg/2006/07/3791/transparent.gif"> <IMG id=DragImage9 src="/articleimg/2006/07/3791/drag_drop_spade.gif"> <IMG id=DragImage10 src="/articleimg/2006/07/3791/drag_drop_heart.gif"> <IMG id=DragImage11 src="/articleimg/2006/07/3791/drag_drop_diamond.gif"> <IMG id=DragImage12 src="/articleimg/2006/07/3791/drag_drop_club.gif"> </FIELDSET>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x)，而且还要符合条件(mousePos.x<(targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．

Pulling It All Together

最后我们拥有了所有的drag/drop的脚本片断！下一个事情是我们将创建一个DOM处理．如果你不是很熟悉，请先阅读我的JavaScript Primer on DOM Manipulation.

下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面，它可以用户记录一个list(列表)，定为一个导航窗口在左边或者右边，或者更多的函数你可以想到的．

下一步我们将通过"假代码"让reader看到真代码，下面为推荐:

1、当document第一次载入时，创建dragHelper DIV.dragHelper将给移动的item加阴影．真实的item没有被dragged，只是用了insertBefor和appendChild来移动了，我们隐藏了dragHelper

2、有了mouseDown与mouseUp函数．所有的操作会对应到当到iMouseDown的状态中，只有当mouse左键为按下时iMouseDown才为真，否则为假．

3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器．任何参数(containers)将通过CreatedcragContainer进行重组与序列化，这样可以自由的移动．CreateDragContainer函数也将item进行绑定与设置属性．

4、现在我们的代码知道每个item的加入，当我们移动处mouseMove，mouseMove函数首先会设置变量target，鼠标移动在上面的item，如果这个item在容器中(checked with getAttribute):

• 运行一小段代码来改变目标的样式．创造rollover效果
• 检查鼠标是否没有放开，如果没有
  • 设置curTarget代表当前item
  • 记录item的当前位置，如果需要的话，我们可以将它返回
  • 克隆当前的item到dragHelper中，我们可以移动带阴影效果的item.
  • item拷贝到dragHelper后，原有的item还在鼠标指针下，我们必须删除掉dragObj，这样脚本起作用，dragObj被包含在一个容器中．
  • 抓取容器中所有的item当前坐标，高度/宽度，这样只需要记录一次，当item被drag时，每随mouse移动，每移钟就会记录成千上万次．
• 如果没有，不需要做任何事，因为这不是一个需要移动的item

5、检查curTarget，它应该包含一个被移动的item,如果存在，进行下面操作：

• 开始移动带有阴影的item，这个item就是前文所创建的
• 检查每个当前容器中的container，是否鼠标已经移动到这些范围内了
  • 我们检查看一下正在拖动的item是属于哪个container
  • 放置item在一个container的某一个item之前，或者整个container之后
  • 确认item是可见的
• 如果鼠标不在container中，确认item是不可见了．

6、剩下的事就是捕捉mouseUp的事件了