分享框架网页元素拖拽插件

效果说明：配合已有半铸钢钢性铸铁(铸造半钢)样式，载入插件后，网页元素可以随意在窗口内拖拽，设置了原位置半透明和拖拽半透明的效果选项，可根据需要选择。另外，当页面上有多个可拖拽元素时，可以载入另外一个用于设置z指数的插件，模拟Windows操作系统操作系统窗口点击置顶效果。

js/jquery.jLdraggable.js:

；（函数($){ $ .fn。extend({ ' jLzindex ' : function(){//用于判断和设置各个对话框的z-index var $ drag index=$(this)；var arrzIndex=new Array()；for(var I=0；i $ dragIndex.lengthi ){ //初始化数组元素值，并按拖拽项顺序设置z指数值var ZidxNum=10000-I-I-2；arrzIndex[I]={ ' Getid ' : ' drag '($ DragIndex。长度-I)，' Zidx ' : ZidxNum }；$(“# drag”($ DragIndex。长度-I)).css('z-index '，ZidxNum)；} $ DragIndex。鼠标向下(函数(){ 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){可拖动=真；var MouseLeft=e . PageX-$ drag。查找(' .拖动条').偏移量()。向左；//鼠标在拖拽区域中的横向距离var mouseTop=e.pageY - $drag.find ' .拖动条').偏移量()。顶部；//鼠标在拖拽区域中的横向距离if(model=='cFade'){ //原位置元素半透明$drag.clone(false).appendTo("正文")。addClass('dragShadow ').fadeTo(0，0.2).css('z-index ')、parsent($ drag)。CSS(' z-index ')-1；} else if(model=='dFade'){ //跟随鼠标元素半透明$drag.clone(false).appendTo("正文")。addClass('dragShadow ').css('z-index ')、parsent($ drag)。CSS(' z-index ')-1；$drag.fadeTo(0，0.2)；} $(文档)。鼠标移动(函数(e){ if(draggable){ var winWidth=$(window)).宽度();var winHeight=$(窗口)。高度();var向左拖动=e . page x-MouseLeft；var DragTop=e . Pagey-MouseTop；//拖拽框不能超出窗口边界if(向左拖动0){向左拖动=0；} if(DragLeft $ drag。width(){ WinWidth } { DragLeft=WinWidth-$ drag。宽度()；} if(DragTop 0){ DragTop=0；} if(DragTop $ drag。height()(WinHeight){ DragTop=WinHeight-$ drag。高度()；} $drag.css('left '，向左拖动' px ')；$drag.css('top '，DragTop ' px ')；} else { return false } })；});$(文档)。鼠标上移(function(){ draggable=false；$('.拖影').移除();if(model==' dFade '){ $ drag。淡入(0，1)；} });} })})(jQuery)index.html:

脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。可拖动的。js /脚本脚本类型='text/javascript'$(文档)。ready(function(){ $('#drag1 ')).jLdraggable()；//无参数，没有影子$('#drag2 ').JL drag able(' CFade ')；//cFade，定义原位置半透明阴影$('#drag3 ').JL drag able(' 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=' drag 2 ' class=' DragIndex ' div class=' DragBar DragTitle '/div div class=' DragContent '原位半透明/div/div div id=' drag 3 ' class=' DragIndex ' div class=' DragBar DragTitle '/div div class=' DragContent '拖拽半透明/div/div精彩专题分享：JavaScript拖拽特效框架拖拽特效

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。