bob体育官方平台
分享jQuery网页元素拖拽插件_jquery_脚本之家

效果与利益表明:卓殊本来就有CSS样式,载入插件后,网页成分得以私下在窗口内拖拽,设置了原来的地点置半透明和拖拽半透明的效率选项,可依附供给选择。别的,当页面上有八个可拖拽成分时,能够载入此外三个用来安装z-index的插件,模拟Windows窗口点击置顶效果。

js/jquery.jLdraggable.js:

;{ $.fn.extend({ "jLzindex" : function(){ //用于判断和设置各个对话框的z-index var $dragIndex = $; var arrzIndex = new Array(); for(var i=0; i < $dragIndex.length; i++){ //初始化数组元素值,并按拖拽项顺序设置z-index值 var zIdxNum = 10000 - i - i -2; arrzIndex[i] = {"getId":"drag" + ($dragIndex.length - i),"zIdx":zIdxNum}; $("#drag" + ($dragIndex.length - i)).css; } $dragIndex.mousedown{ var i = 0; var dIndex = 0; while{ //找到当前点击项在数组里的下标 if(arrzIndex[i].getId == ${ dIndex = i;} i++; } for(var i = dIndex; i >=0; i--){ //把点击项移至数组第一位,其他项后移 if{ arrzIndex[i].getId = arrzIndex[i-1].getId; $("#" + arrzIndex[i].getId).css("z-index",arrzIndex[i].zIdx); } else{ arrzIndex[i].getId = $; $("#" + arrzIndex[i].getId).css("z-index",arrzIndex[i].zIdx); } } }); }, "jLdraggable" : function{ //拖拽插件 var model = mod; var draggable = false; var $drag = $; $drag.find.mousedown{ draggable = true; var mouseLeft = e.pageX - $drag.find.left; //鼠标在拖拽区域中的横向距离 var mouseTop = e.pageY - $drag.find.top; //鼠标在拖拽区域中的横向距离 if{ //原位置元素半透明 $drag.clone.appendTo.addClass.fadeTo.css("z-index",parseInt - 1); } else if{ //跟随鼠标元素半透明 $drag.clone.appendTo.addClass.css("z-index",parseInt - 1); $drag.fadeTo.mousemove{ if{ var winWidth = $; var winHeight = $; var dragLeft = e.pageX - mouseLeft; var dragTop = e.pageY - mouseTop; //拖拽框不能超出窗口边界 if{dragLeft = 0;} if(dragLeft + $drag.width{ dragLeft = winWidth - $drag.width{dragTop = 0;} if(dragTop + $drag.height{ dragTop = winHeight - $drag.height(); } $drag.css("left",dragLeft + "px"); $drag.css; } else{ return false; } }); }); $.mouseup{ draggable = false; $.remove(); if{ $drag.fadeTo

index.html:

  $.ready{ $.jLdraggable(); //&#26080;&#21442;&#25968;&#65292;&#27809;&#26377;&#24433;&#23376; $.jLdraggable; //cFade&#65292;&#23450;&#20041;&#21407;&#20301;&#32622;&#21322;&#36879;&#26126;&#38452;&#24433; $.jLdraggable; //dFade&#65292;&#23450;&#20041;&#36319;&#38543;&#40736;&#26631;&#30340;&#21322;&#36879;&#26126;&#38452;&#24433; $.jLzindex;.dragTitle{ width:120px; height:27px; background:url; cursor:move;}.dragContent{ width:120px; height:73px; background:url; line-height:73px; text-align:center;}#drag1{ width:120px; position:absolute; left:10px; top:10px;}#drag2{ width:120px; position:absolute; left:90px; top:90px;}#drag3{ width:120px; position:absolute; left:170px; top:170px;}  无参数  原位半透明  拖拽半透明

优良专题共享:JavaScript拖拽特效 jQuery拖拽特效

如上正是本文的全体内容,希望对我们的求学抱有助于,也指望咱们多多指教脚本之家。

上一篇:bob体育appjs中forEach、for-in和for-of循环方法 下一篇:没有了
返回顶部