怎么用javascript进行拖拽.doc

怎么用javascript进行拖拽

本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版权归原文所有

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．

有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！

网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．

先看一个例子

HTML代码：
<SCRIPTsrc="/articleimg/2006/07/3791/drag_drop.js"type=text/javascript></SCRIPT>
<STYLEtype=text/css>LI{
MARGIN-BOTTOM:10px
}
OL{
MARGIN-TOP:5px
}
.DragContainer{
BORDER-RIGHT:#6699992pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#6699992pxsolid;PADDING-LEFT:5px;FLOAT:left;PADDING-BOTTOM:0px;MARGIN:3px;BORDER-LEFT:#6699992pxsolid;WIDTH:100px;PADDING-TOP:5px;BORDER-BOTTOM:#6699992pxsolid
}
.OverDragContainer{
BORDER-RIGHT:#6699992pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#6699992pxsolid;PADDING-LEFT:5px;FLOAT:left;PADDING-BOTTOM:0px;MARGIN:3px;BORDER-LEFT:#6699992pxsolid;WIDTH:100px;PADDING-TOP:5px;BORDER-BOTTOM:#6699992pxsolid
}
.OverDragContainer{
BACKGROUND-COLOR:#eee
}
.DragBox{
BORDER-RIGHT:#0001pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#0001pxsolid;PADDING-LEFT:2px;FONT-SIZE:10px;MARGIN-BOTTOM:5px;PADDING-BOTTOM:2px;BORDER-LEFT:#0001pxsolid;WIDTH:94px;CURSOR:pointer;PADDING-TOP:2px;BORDER-BOTTOM:#0001pxsolid;FONT-FAMILY:verdana,tahoma,arial;BACKGROUND-COLOR:#eee
}
.OverDragBox{
BORDER-RIGHT:#0001pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#0001pxsolid;PADDING-LEFT:2px;FONT-SIZE:10px;MARGIN-BOTTOM:5px;PADDING-BOTTOM:2px;BORDER-LEFT:#0001pxsolid;WIDTH:94px;CURSOR:pointer;PADDING-TOP:2px;BORDER-BOTTOM:#0001pxsolid;FONT-FAMILY:verdana,tahoma,arial;BACKGROUND-COLOR:#eee
}
.DragDragBox{
BORDER-RIGHT:#0001pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#0001pxsolid;PADDING-LEFT:2px;FONT-SIZE:10px;MARGIN-BOTTOM:5px;PADDING-BOTTOM:2px;BORDER-LEFT:#0001pxsolid;WIDTH:94px;CURSOR:pointer;PADDING-TOP:2px;BORDER-BOTTOM:#0001pxsolid;FONT-FAMILY:verdana,tahoma,arial;BACKGROUND-COLOR:#eee
}
.m