怎么用javascript进行拖拽

《怎么用javascript进行拖拽》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、怎么用javascript进行拖拽本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html所有版权归原文所有Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你

2、的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．先看一个例子HTML代码：LI{MARGIN-BOTTOM:10px}OL{MARGIN-TOP:5px}.DragContainer{BOR

3、DER-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;B

4、ORDER-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:#0001px

5、solid;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;B

6、ORDER-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;PA

7、DDING-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}.miniDragBox{BORDER-RIGH

8、T:#0001pxsolid;PADDING-RIG