jquery网页元素拖拽插件效果及实现

复制代码代码如下：(函数($){ $。fn。extend({ ' jlzindex ' : function(){//用于判断和设置各个对话框的z-index var $ drag index=$(this)；var arrzindex=new array()；for(var I=0；i $ dragindex.lengthi ){ //初始化数组元素值，并按拖拽项顺序设置z指数值var zid xnum=10000-I-I-2；arrzindex[I]={ ' getid ' : ' drag '($ drag index。length-I)，' zidx ' : zidxnum }；$(“# drag”($ drag index。长度-I)).css('z-index '，zid xnum)；} $拖动索引。鼠标向下(函数(){ var I=0；var dindex=0；while(arrzindex[i]){ //找到当前点击项在数组里的下标if(arrzindex[i]).getid==$(this).attr(' id '){ dindex=I；}我；} for(var I=dindex；I=0；i - ){ //把点击项移至数组第一位，其他项后移if(i 0){arrzindex[i].getid=arrzindex[i-1].getid$('#' arrzindex[i]).getid ).css('z-index '，arrzindex[i]).zidx)；} else{arrzindex[i].getid=$(this).attr(' id ')；$('#' arrzindex[i]).getid ).css('z-index '，arrzindex[i]).zidx)；}}});}、“jldragable”:函数(mod){ //拖拽插件定义变量模型=mod var drag able=false var $ drag=$(this)；$drag.find(' .拖动条').鼠标向下(函数(e){可拖动=真；鼠标左键=e . pagex-$拖动。查找(' .拖动条').偏移量()。向左；//鼠标在拖拽区域中的横向距离var mousetop=e.pagey - $drag.find(' .拖动条').偏移量()。顶部；//鼠标在拖拽区域中的横向距离if(model=='cfade'){ //原位置元素半透明$drag.clone(false).附录(正文).addclass('dragshadow ').fadeto(0，0.2).css('z-index ')，par send($ drag)。CSS(' z-index ')-1；} else if(model=='dfade'){ //跟随鼠标元素半透明$drag.clone(false).附录(正文).addclass('dragshadow ').css('z-index ')，par send($ drag)。CSS(' z-index ')-1；$drag.fadeto(0，0.2)；}$(文档)。鼠标移动(函数(e){ if(可拖动){ var win width=$(window)).宽度();var winheight=$(window).高度();向左拖动=e . pagex-鼠标左键；var拖动顶部=e . pagey-鼠标顶部；//拖拽框不能超出窗口边界if(向左拖动0){向左拖动=0；} if(向左拖动$ drag。width()win width){向左拖动=win width-$ drag。宽度()；} if(拖动顶部0){拖动顶部=0；} if(拖动top $拖动。height()win height){ drag top=win height-$ drag。高度()；}$drag.css('left '，向左拖动' px ')；$drag.css('top '，drag top ' px ')；} else { return false } })；});$(文档)。鼠标上移(function(){ draggable=false；$('.拖影').移除();if(model==' dfade '){ $ drag。淡入(0，1)；}});}})})(jquery)index.html:复制代码代码如下：脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery。jdraggable。js '/脚本类型=' text/JavaScript ' $(文档)。ready(function(){$('#drag1 ')).jldragable()；//无参数，没有影子$('#drag2 ').jldragable(' cfade ')；//cfade，定义原位置半透明阴影$('#drag3 ').jldragable(' dfade ')；//dfade，定义跟随鼠标的半透明阴影$('.拖动索引').jlzindex()；//多个窗口的z指数处理});/scriptstyle type='text/css ' .dragtitle { width:120px高度：27 px背景： URL(图片/拖拽_ 01。jpg)；cursor:move}。drag content { width :120 px heart :73 px background : URL(images/drag _ 02。jpg)；线高：73 px文本对齐：居中；} # drag1 { width:120px位置：绝对；left :10 xtop :10 px } # drag 2 { width :120 px位置：绝对；left :90 pxtop :90 px } # drag 3 { width :120 px位置：绝对；left :170 pxtop :170 px }/style div id=' drag 1 ' class=' drag index ' div class=' drag bar drag title '/div class=' drag content '无参数/div/div div id='拖动2 ' class='拖动索引' div class='拖动条拖动标题'/div div class='拖动内容'原位半透明/div/div div id='拖动3 ' class='拖动索引' div class='拖动条拖动标题'/div div class='拖动内容'拖拽半透明/div/div