js拖拽列表实现代码

附加一点：禁止移动选中的文字，FF可以设置CSS xxxx {-moz-user-select : none；}其他浏览器可以设置xxxx . onselectstart=function(){ return false }。一个实现原理是创建一个占位符元素(或复制一个目标元素，即复制b)，然后拖动目标元素(或复制的新元素b)。找到相应的位置后，插入目标元素。清除占位符元素或B.比如有一个列表：复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；-moz-user-select : none；} ul { margin: 100pxborder: 1px固体# adff2flist-style:无；} li { height: 30px线高： 30px；padd : 0；list-style:无；} Li : hover { background : # BDB 76b；光标：移动；}/style/head body ul id=' outer _ wrap ' liArticle 1 /li liar ticle 2/Li liar ticle 3/Li liar ticle 4/Li liar ticle 5/Li liar ticle 6/Li liar ticle 7/Li liar ticle 8/Li/ul/body/html单击“liar ticle 1/Li”(标记为元素a)。获取“li No.1 /li”的位置和大小信息，复制一次元素A(作为元素B)，然后将其插入到文档中，将元素B绝对定位在元素A的位置，然后在鼠标移动时拖动元素B，然后判断插入点。判断插入点就是判断当前鼠标的坐标。如果鼠标坐标落在除元素A之外的其他LI元素的范围内，则满足插入条件。同时，上部插入前面，下部插入后面。(=。=个人口味重，觉得这段话好邪恶)。

为了标示出插入的位置，我们在选中的插入点处另插入一个元素，仅作标杆用。下面是一个演示：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' * { margin 3360 0；padd : 0；-moz-用户-选择：无；} ul { margin : 100 pxborder : 1px固体# adff2flist-style:无；} li { height: 30px线高： 30pxpadd : 0；列表样式：无；}李：悬停{背景： # 76b；光标：移动；}/style/head body ul id=' outer _ wrap ' Li第一条/li li第二条/li li第三条/li li第四条/li li第五条/li li第六条/li li第七条/li li第八条/li /ul脚本类型=' text/JavaScript '函数$(id){返回文档。getelementbyid(id)；} //获取鼠标位置函数getMousePoS(e){ return { x : e . Pagex | | e . Clientx文档。尸体。向左滚动，y : e . Pagey | | e . Clienty文档。尸体。向上滚动} }//获取元素位置函数GetElementPoS(El){ return { x : El。offsetParent？埃尔。偏移量参数。被呼叫者(El。offsetparent)[' x ']: El。offsetleft，y : el.offsetParent？埃尔。偏移参数。被呼叫者(El。offsetparent)[' y ']: El。offsettop } }//获取元素尺寸函数GetElementSize(El){ return { width : El。偏置高度： el.offsetHeight } } //禁止选择文件。onselectstart=function(){ return false；} //判断是否有挪动var MOVE={ }；MOVE.isMove=false//就是创建的标杆var div=文档。创建元素(' div ')；div。风格。宽度=' 400像素'；div。风格。高度=' 1pxdiv。风格。FontSize=' 0div。风格。背景='红色'；var outer _ wrap=$(' outer _ wrap ')；外包装。onmousedown=function(event){//获取列表顺序var lis=外包装。getelementsbytagname(' Li ')；for(var I=0；一。长度；I){ lis[I][' pos ']=GetElementPoS(lis[I])；lis[I][' size ']=GetElementSize(lis[I])；}事件=事件| | window.eventvar t=事件。目标| |事件。加速；if(t .标记名。tolowercase()==' Li '){ var p=getMousePos(event)；var el=t.cloneNode(真);' el.style.position='绝对；埃尔。风格。左侧=t位置。x ' px埃尔。风格。top=t . pos。y ' px埃尔。风格。宽度=t .尺寸。宽度' px '；埃尔。风格。高度=t .尺寸。高度“px”；el.style.border='1px实心# d4d 4 '；埃尔。风格。背景=' # d4d 4d 4el.style。不透明度=' 0.7 ';文件。尸体。阑尾(El)；文件。onmousemove=function(event){ event=event | | window。事件；var current=getMousePos(事件);埃尔。风格。左侧=t位置。x电流。x-p。x ' px埃尔。风格。top=t . pos。y电流。y-p . y ' px；文件。尸体。风格。光标='移动'；//判断插入点for(var I=0；一。长度；I){ if(当前。x lis[I][' pos '][' x ']当前。x lis[I][' pos '][' x ']lis[I][' size '][' width ']当前。y列[I][' pos '][' y ']当前。y lis[I][' pos '][' y ']lis[I][' size '][' height ']/2){ if(t！=lis[I]){ MOVE。IsMove=trueouter_wrap.insertBefore(div，lis[I])；} } else if(当前。x lis[I][' pos '][' x ']当前。x lis[I][' pos '][' x ']lis[I][' size '][' width ']当前。y lis[I][' y ']lis[I][' size '][' height ']/2当前。y lis[I][' pos '][' y ']lis[I][' size '][' height ']){ if(t！=lis[I]){ MOVE。IsMove=trueouter_wrap.insertBefore(div，lis[i]).下一个兄弟姐妹} } } } //移除事件文件。onmouseup=function(event){ event=event | | window。事件；document . onmousemove=null if(MOVE。IsMove){ outer _ wrap。替换子项(t，div)；MOVE.isMove=false}文档。尸体。移除子对象(El)；el=nulldocument。尸体。风格。光标='正常'；document.onmouseup=null} } }/脚本/正文/html上面的演示代码细节欠缺考虑，仅供展示原理。