用Javascript实现鼠标拖拽网页表单(4)

 

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的事件了

实现一个拖动的全代码：

　　点击这里运行代码

　　你现在拥有了拖拽的所有东西．

　　下面的三个demo是记录事件历史．当你的鼠标在item上移动，将记录所生的事件，如果你不明白可以尝试一下鼠标的划过或者拖动，看有什么发生．

　　点击这里运行代码

　　关于译者：
　　雪山老人，lamp程序员，web开发者，你可以访问sohotx.com来了解他！

　　关于作者：
　　Mark Kahn是一个web开发者与DBA.你可以访问他的主页联系他！