学步园

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