html5jquery制作平滑拖拽效果,jquery网页元素拖拽插件效果及实现

;(function($){

$.fn.extend({

"jlzindex" : function(){ //用于判断和设置各个对话框的z-index

var $dragindex = $(this);

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("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 < 0){dragleft = 0;}

if(dragleft + $drag.width() > winwidth){

dragleft = winwidth - $drag.width();

}

if(dragtop < 0){dragtop = 0;}

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：

$(document).ready(function(){

$("#drag1").jldraggable(); //无参数，没有影子

$("#drag2").jldraggable("cfade"); //cfade，定义原位置半透明阴影

$("#drag3").jldraggable("dfade"); //dfade，定义跟随鼠标的半透明阴影

$(".dragindex").jlzindex(); //多个窗口的z-index处理

});

.dragtitle{

width:120px;

height:27px;

background:url(images/drag_01.jpg);

cursor:move;

}

.dragcontent{

width:120px;

height:73px;

background:url(images/drag_02.jpg);

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;

}

无参数

原位半透明

拖拽半透明