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)

　　<script type="text/javascript" src="js/jquery.min.js"></script>

　　<script type="text/javascript" src="js/jquery.jldraggable.js"></script>

　　<script type="text/javascript">

　　$(document).ready(function(){

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

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

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

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

　　});

　　</script>

　　<style type="text/css">

　　.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;

　　}

　　</style>

　　<div id="drag1" class="dragindex">

　　<div class="dragbar dragtitle"></div>

　　<div class="dragcontent">无参数</div>

　　</div>

　　<div id="drag2" class="dragindex">

　　<div class="dragbar dragtitle"></div>

　　<div class="dragcontent">原位半透明</div>

　　</div>

　　<div id="drag3" class="dragindex">

　　<div class="dragbar dragtitle"></div>

　　<div class="dragcontent">拖拽半透明</div>

　　</div>