jquery拖放排序的简单实现方法(效果增强版)

本文描述了jquery拖放排序的一种简单实现方法。分享给大家参考，如下：

运行效果截图如下：

没有新动作，所以分析代码后很容易增强~ ~

代码如下：

！DOCTYPE HTMl HTMl heart heta http-equiv=' Content-TYPe ' Content=' text/HTMl；charset=utf-8' /title测试的拖拽功能/titlestyle type='text/css'body，div { margin : 0；pad ing : 0；font-size : 12px}车身{宽度：100%;margin: 0 auto}ul，Li { margin : 0；padd : 0；列表样式：无；}.清除{ clear:两者；宽度： 1px高度： 0px行高： 0pxfont-size : 1px}.drag _ module _ box { width : 600 px；height : auto margin : 25px 0 0 0 padd : 5pxborder : 1 px固体# f00}。drag _ module _ box 1 {宽度： 600 pxheight : auto margin : 25px 0 0 0 padd : 5pxborder : 1 px固体# f00}。drag _ module _ main {位置：静态；宽度： 600像素；高度： 80px边距-底部： 5pxborder: 1px纯蓝；背景# ccc}。drag _ module _ main dash {位置：绝对值；宽度： 600像素；高度： 80px边距-底部： 5pxborder: 1px蓝色虚线；背景# ecececopacity: 0.7 }。drag _ module _ hide { width : 600 px；高度： 80px边距-底部： 5px}.drag _ module _ dash {位置： sta抽搐；宽度： 600像素；高度： 80px边距-底部： 5pxborder: 1px虚线# f00 }；/style脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' 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 DivId=0，Divid=0，Divid=0；tarFirstY=0；//拖拽对象的索引、高度、的初始化。

var tarDiv=null，tarFirst，tempDiv//要插入的目标元素的对象，临时的虚线对象function loopbox(){ //循环初始化$('.拖动模块盒')。查找('。拖动模块主').每个(函数(){控制台。日志(' find ')；$(这个)。鼠标向下(函数（事件){ //拖拽对象DivV=$(this)；//鼠标元素相对偏移量范围。x=事件。pagex-DiLV。偏移量().向左；范围。y=事件。佩吉-DiLV。偏移量().顶部；DiVid=DiViv。index()；距离=距离高度();距离=距离8/2;move=trueDivV。attr(' class '，' drag _ module _ main dash ')；//创建新元素插入拖拽元素之前的位置（虚线框)$(' div class=' drag _ module _ dash '/div ').插入之前（数字);});});} loop box()；$('.拖动模块盒')。鼠标移动(函数（事件){控制台。日志('鼠标移动')；if(！移动)返回虚假位置。x=事件。x页范围。x；最后一次发布。y=事件。佩吉范围。y；lastPos.y1=lastPos.y硬盘；//拖拽元素随鼠标移动Div.css({left: lastPos.x 'px '，top : LastPoS。y ' px ' })；//拖拽元素随鼠标移动查找插入目标元素var $main=$(' .drag _ module _ main’)；//局部变量：按照重新排列过的顺序再次获取各个元素的坐标，tempDiv=$(' .drag _ module _ dash’)；//获得临时虚线框的对象$ main。每个(函数(){ Tardiv=$(this)；tarPos.x=tarDiv.offset().向左；tarPos.y=tarDiv.offset().顶部；tarpos。y1=tarpos。y Tardiv。高度()/2；tarFirst=$ main。eq(0)；//获得第一个元素tarFirstY=tarFirst.offset().顶部左侧；//第一个元素对象的中心纵坐标//拖拽对象移动到第一个位置if(最后一个位置。y=tarFirst y){ tempdiv。在(tarFirst)之前插入；} //判断要插入目标元素的坐标后，直接插入if(LastPoS。y=TarPoS。y-Divhalf LastPoS。y1=TarPoS。y1){ tempdiv。insert after(TarTV)；} });}).鼠标向上(功能(事件){控制台。log('鼠标向上')；如果(DiDiV==null)返回错误的插入之前(TempDiv)；//拖拽元素插入到虚线差异的位置上DivV。attr(' class '，' drag _ module _ main ')；//恢复对象的初始样式$('.拖动模块虚线').移除();//删除新建的虚线div move=false })；$('#drag_module_insert ').单击(函数(){ $(' # drag _ module _ box 1 ').html($('#drag_module_box1 ').html() $('#drag_module_box2 ').html())；loopbox()；});$('#drag_module_seque ').单击(函数(){ $(').拖动模块盒')。查找('。拖动模块主').每个（函数(){ console.log($(this)).attr(' id ')；});});});/script/headdy div类=' drag _ module _ box ' id=' drag _ module _ box 1 ' div类=' drag _ module _ main ' id=' main 1 ' div 1/div类=' drag _ module _ main ' id=' main 2 ' div 2/div类=' drag _ module _ main ' id=' main 3 ' div 3/div类=' drag _ module _ main ' id=' main 4 ' div 4/div类='拖动_ module _ main ' id=' main 5 ' div 5/div新建id=' drag _ module _ insert '/输入类型='按钮'值='确定id=' drag _ module _ seque '/body/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery常用操作技巧汇总》

希望本文对大家的jQuery程序设计有所帮助。