效果如下：

代码如下：

！DOCTYPE HTMl HTMl head meta charset=' UTF-8 ' title div横向拖拽排序/title脚本src=' http :http://libs。百度。com/jquery/1。9 .0/jquery。js '/脚本样式类型=' text/CSS ' body，div { padd : 0pxmargin : 0px }。盒子{位置：相对；左边距left: 15pxpadding: 10px填充-右： 0px宽度： 810像素；border:蓝色固体1px}。box ul { list-style :无；飞越：隐藏；padd : 0；margin:0}。向左拖动{ float:border: #000固体1px文本对齐：中心；} .阿利方框图；padding: 10px 25px }。拖拽-dash {位置：绝对；border: #000固体1px背景# ececec}。dash { float:左侧；border: 1px固体透明；}/style/head dy1h div横向拖拽排序/h1 div class=' box ' ul Li class=' drag ' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '导航一/a/Li Li class=' drag ' a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '导航二导航/a/Li Li class=' drag ' a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '导航导航导航三/a/Li Li class=' drag ' a href=' # rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '导航导航四/a/Li Li class=' drag ' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '导五/a/Li/ul/div脚本类型=' text/JavaScript ' $(文档)。 ready(function(){ var范围={ x : 0，y : 0 }；//鼠标元素偏移量var lastPos={x: 0，y: 0，x1: 0，y 1: 0 }；//拖拽对象的四个坐标var tarPos={x: 0，y: 0，x1: 0，y 1: 0 }；//目标元素对象的坐标初始化var DivV=null，move=false var select=false//拖拽对象拖拽状态选中状态var DivId=0，Divid=0，Divid=0；var tarFirstY=0；//拖拽对象的索引、高度、的初始化。

var tarDiv=null，tarFirst，tempDiv//要插入的目标元素的对象，临时的虚线对象var initPos={x: 0，y : 0 }；改变宽度；//拖拽对象的宽度$('.拖动')。每个（函数(){ $(此)).鼠标向下(函数（事件){ choose=true//拖拽对象DivV=$(this)；//记录拖拽元素初始位置初始化位置。x=DiV。位置().向左；initpos。y=DiV。位置().顶部；//鼠标元素相对偏移量范围。x=事件。第x页-DivV。位置().向左；范围。y=事件。佩吉-DivV。位置().顶部；DiVid=DiViv。index()；Divwidth=Divwidth()；距离=距离宽度/2;theDiv.removeClass('拖动');DiV。add CLaSS(' drag-dash ')；Div.css({left: initPos.x 'px '，top : init pos。y ' px ' })；//创建新元素插入拖拽元素之前的位置（虚线框)$('div class='dash'/div ').插入之前（数字);tempDiv=$(' .破折号');$('.破折号')。css('width '，Divwidth)；返回false })；});$(文档)。mouseup(函数（事件){ if(！choose){ return false；} if(！移动){ //恢复对象的初始样式dViv。移除类(' drag-dash ')；' theDiv.addClass('拖动');tempdiv。移除()；//删除新建的虚线div选择=false返回false} DiV。insert before(TempDiv)；//拖拽元素插入到虚线差异的位置上//恢复对象的初始样式dViv。移除类(' drag-dash ')；' theDiv.addClass('拖动');tempdiv。移除()；//删除新建的虚线div move=falsechoose=false返回false }).鼠标移动(函数（事件){ if(！choose){ return false } move=true；最后一次发布。x=事件。x页范围。x；最后一次发布。y=事件。佩吉范围。y；最后一次发布。x1=最后位置。x Divwidth//拖拽元素随鼠标移动Div.css({left: lastPos.x 'px '，top : LastPoS。y ' px ' })；//拖拽元素随鼠标移动查找插入目标元素var $main=$(' .拖动');//局部变量：按照重新排列过的顺序再次获取各个元素的坐标，$ main。每个(函数(){ Tardiv=$(this)；tarPos.x=tarDiv.position().向左；tarPos.y=tarDiv.position().顶部；tarpos。x1=tarpos。x Tardiv。width()/2；tarFirst=$ main。eq(0)；//获得第一个元素 tarFirstX=tarFirst.position().左半部；//第一个元素对象的中心纵坐标//拖拽对象移动到第一个位置if(LastPoS。x=TarFirstX){ TempDiv。在(TarFirstX)之前插入；} //判断要插入目标元素的坐标后，直接插入if(LastPoS。x=TarPoS。x-Divhalf LastPoS。x1=TarPoS。x1){ TempDiv。insert after(Tardiv)；} });返回false })；});/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！