怎么用javascript进行拖拽

怎么用javascript进行拖拽本文译自：所有版权归原文所有Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．先看一个例子HTML代码：SCRIPTsrc=/articleimg/2006/07/3791/drag_drop.jstype=text/javascript/SCRIPTSTYLEtype=text/cssLI{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}.miniDragBox{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{BACKGROUND-COLOR:#ffff99}.DragDragBox{BACKGROUND-COLOR:#ffff99}.DragDragBox{FILTER:alpha(opacity=50);BACKGROUND-COLOR:#ff99cc}LEGEND{FONT-WEIGHT:bold;FONT-SIZE:12px;COLOR:#666699;FONT-FAMILY:verdana,tahoma,arial}FIELDSET{PADDING-RIGHT:3px;PADDING-LEFT:3px;PADDING-BOTTOM:3px;PADDING-TOP:3px}.History{FONT-SIZE:10px;OVERFLOW:auto;WIDTH:100%;FONT-FAMILY:verdana,tahoma,arial;HEIGHT:82px}#DragContainer8{BORDER-RIGHT:#6699991pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#6699991pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:0px;BORDER-LEFT:#6699991pxsolid;WIDTH:110px;PADDING-TOP:5px;BORDER-BOTTOM:#6699991pxsolid;HEIGHT:110px}.miniDragBox{FLOAT:left;MARGIN:0px5px5px0px;WIDTH:20px;HEIGHT:20px}PRE{BORDER-RIGHT:#ccc1pxsolid;PADDING-RIGHT:10px;BORDER-TOP:#ccc1pxsolid;PADDING-LEFT:10px;PADDING-BOTTOM:10px;BORDER-LEFT:#ccc1pxsolid;PADDING-TOP:10px;BORDER-BOTTOM:#ccc1pxsolid;BACKGROUND-COLOR:#f8f8f0}/STYLEbodyFIELDSETid=Demo4LEGEND样例-拖拽页面元素/LEGENDDIVDIVclass=DragContainerid=DragContainer4overclass=OverDragContainerDIVclass=DragBoxid=Item1overclass=OverDragBoxdragclass=DragDragBoxItem#1/DIVDIVclass=DragBoxid=Item2overclass=OverDragBoxdragclass=DragDragBoxItem#2/DIVDIVclass=DragBoxid=Item3overclass=OverDragBoxdragclass=DragDragBoxItem#3/DIVDIVclass=DragBoxid=Item4overclass=OverDragBoxdragclass=DragDragBoxItem#4/DIV/DIVDIVclass=DragContainerid=DragContainer5overclass=OverDragContainerDIVclass=DragBoxid=Item5overclass=OverDragBoxdragclass=DragDragBoxItem#5/DIVDIVclass=DragBoxid=Item6overclass=OverDragBoxdragclass=DragDragBoxItem#6/DIVDIVclass=DragBoxid=Item7overclass=OverDragBoxdragclass=DragDragBoxItem#7/DIVDIVclass=DragBoxid=Item8overclass=OverDragBoxdragclass=DragDragBoxItem#8/DIV/DIVDIVclass=DragContainerid=DragContainer6overclass=OverDragContainerDIVclass=DragBoxid=Item9overclass=OverDragBoxdragclass=DragDragBoxItem#9/DIVDIVclass=DragBoxid=Item10overclass=OverDragBoxdragclass=DragDragBoxItem#10/DIVDIVclass=DragBoxid=Item11overclass=OverDragBoxdragclass=DragDragBoxItem#11/DIVDIVclass=DragBoxid=Item12overclass=OverDragBoxdragclass=DragDragBoxItem#12/DIV/DIV/DIV/FIELDSET/body/html/articleimg/2006/07/3791/drag_drop.js代码：varDemos=[];varnDemos=8;//Demovariables//iMouseDownrepresentsthecurrentmousebuttonstate:upordown/*lMouseStaterepresentsthepreviousmousebuttonstatesothatwecancheckforbuttonclicksandbuttonreleases:if(iMouseDown&&!lMouseState)//buttonjustclicked!if(!iMouseDown&&lMouseState)//buttonjustreleased!*/varmouseOffset=null;variMouseDown=false;varlMouseState=false;vardragObject=null;//Demo0variablesvarDragDrops=[];varcurTarget=null;varlastTarget=null;vardragHelper=null;vartempDiv=null;varrootParent=null;varrootSibling=null;varnImg=newImage();