在上一篇文章GOOGLE个性主页-页面元素拖拽实例系列(一)中所用的方法基本上实现 MicroSoft Live 和GOOGLE个性主页 类似页面元素可拖拽放置的功能,但是你也许会发现一个问题,鼠标不在可拖动的层之内,而是在与拖动层的相对位置的0,0坐标上,这样当鼠标经过未被拖动的层的时候才能触发这些层的onmouseover事件。如果你为拖动对象设置一个偏移值就可以将鼠标放置到已拖动层内的位置,但是这样就出现一个更严重的问题,未被拖动的那些层的onmouseover事件触发不了了,这样就也无法进行放置动作和放置位置的预览显示。
解决方法:
当鼠标在一个层内时是不能触发另一个层(在这里是下面的层)的任何鼠标事件的,所以这时候必须抛弃onmouseover事件,我们需要通过对鼠标坐标和未被拖动的层的坐标及范围做判断,判断鼠标是否经过某个层。然后再处理相应的事情,但是这里又出现一个问题,判断鼠标是否在某个层内?但是鼠标已经在被拖动的层内了,并且在放下之前会一直在这个层内,这样判断将会得出两个符合条件的结果,所以我们要排除被拖动的层,可以有很多解决方法,在这里我使用一个比较容易理解的方法:不直接判断鼠标是否在哪个层,而是判断被拖动的层是否在某个未被拖动的层内,所以判断的语句片段是这样的:
obj.style.posTop>rootNode.childNodes
[i].offsetTop&&obj.style.posTop<rootNode.childNodes[i].offsetTop+15
这样的话,第一个条件:
obj.style.posTop>rootNode.childNodes[i].offsetTop
就将被拖动的本身排除掉了(当rootNode.childNodes[i]是被拖动的这个层obj的时候,
style.posTop和offsetTop 是相等的,所以大于>条件就不成立了,被拖动的层自身就这样被排除的)。
当然,还可以用其他更有效更直接的方法:
例如在onmousedown的时候就记录下被抓取的元素,然后在判断的时候直接逼开这个元素即可。
实际体验请运行下面代码框:)
更多资源查看专题:Web页面元素拖拽实例系列