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

　　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的当前位置，如果需要的话，我们可以将它返回