增强动态Div效果

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

！DOCTYPE HTML HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8'/title测试的拖拽功能/title style 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 :https://Ajax。谷歌API。com/Ajax/libs/jquery/1。7 .2/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){ //来源：http://www .cn博客。com/web-ed2/archive/2011/09/19/2181819。html 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/head body div class=' drag _ module _ box ' id=' drag _ module _ box 1 ' div class=' drag _ module _ main ' id=' main 1 ' div 1/div class=' drag _ module _ main ' id=' main 2 ' div 2/div class=' drag _ module _ main ' div 3/div class=' drag _ module _ main ' id=' main 4 ' div 4/div class=' drag _ module _ main ' id=' main 5 ' div 5/div新建id='drag_module_insert'/输入类型='按钮'值='确定id=' drag _ module _ seque '/body/html