首页 > web前端 > js教程 > jquery网页元素拖拽插件效果及实现_jquery

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

WBOY
发布: 2016-05-16 17:26:48
原创
1348 人浏览过

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

复制代码 代码如下:
;(function($){
$.fn.extend({
"jlzindex" : function(){ //用于判断和设置各个对话框的z-index
var $dragindex = $(this);
var arrzindex = new array();
for(var i=0; i var zidxnum = 10000 - i - i -2;
arrzindex[i] = {"getid":"drag" + ($dragindex.length - i),"zidx":zidxnum};
$("#drag" + ($dragindex.length - i)).css("z-index",zidxnum);
}
$dragindex.mousedown(function(){
var i = 0;
var dindex = 0;
while(arrzindex[i]){ //找到当前点击项在数组里的下标
if(arrzindex[i].getid == $(this).attr("id")){ dindex = i;}
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);
}
}
});
},
"jldraggable" : function(mod){ //拖拽插件
var model = mod;
var draggable = false;
var $drag = $(this);
$drag.find(".dragbar").mousedown(function(e){
draggable = true;
var mouseleft = e.pagex - $drag.find(".dragbar").offset().left; //鼠标在拖拽区域中的横向距离
var mousetop = e.pagey - $drag.find(".dragbar").offset().top; //鼠标在拖拽区域中的横向距离
if(model == "cfade"){ //原位置元素半透明
$drag.clone(false).appendto("body").addclass("dragshadow").fadeto(0,0.2).css("z-index",parseint($drag.css("z-index")) - 1);
} else if(model == "dfade"){ //跟随鼠标元素半透明
$drag.clone(false).appendto("body").addclass("dragshadow").css("z-index",parseint($drag.css("z-index")) - 1);
$drag.fadeto(0,0.2);
}
$(document).mousemove(function(e){
if(draggable){
var winwidth = $(window).width();
var winheight = $(window).height();
var dragleft = e.pagex - mouseleft;
var dragtop = e.pagey - mousetop;
//拖拽框不能超出窗口边界
if(dragleft if(dragleft + $drag.width() > winwidth){
dragleft = winwidth - $drag.width();
}
if(dragtop if(dragtop + $drag.height() > winheight){
dragtop = winheight - $drag.height();
}
$drag.css("left",dragleft + "px");
$drag.css("top",dragtop + "px");
} else{
return false;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if(model == "dfade"){
$drag.fadeto(0,1);
}
});
}
})
})(jquery)

index.html:
复制代码 代码如下:







无参数




原位半透明




拖拽半透明


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板