以下是 jquery div格子拖动排列效果js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery div格子拖动排列效果</title>
<style>
body,ul,li{margin:0;padding:0;list-style:none;}
.clear{clear:both}
#moveDiv{width:100%;height:100%;position:absolute;z-index:9998;border:1px solid #666;-moz-user-select:none;}
.ding_on{background:#696;cursor:move}
.zhu_on{background:#FC3;cursor:move}
.contentRBox{width:390px;height:auto;border-top:1px solid #666;border-left:1px solid #666;position:relative;margin:50px auto 0 auto;}
.contentBox2,.contentBox2 ul{ float:left;height:56px;width:auto;}
.contentBox2 ul li{float:left;height:55px;width:55px;border-right:1px solid #666;border-bottom:1px solid #666;position:relative;margin:-1px 0 0 -1px;-moz-user-select:none;}
.contentBox2 ul li.ding_on{background:#696;cursor:move}
.contentBox2 ul div.ding_on{background:#696;cursor:move}
#hiddenBox{width:100%;height:100%;float:left;position:absolute;z-index:9999;display:none;cursor:move}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $contentBox=$(".contentRBox");
var contentBoxTop=$contentBox.offset().top;//获取外框的top值
var contentBoxLeft=$contentBox.offset().left;//获取外框的left值
var $contentBox2Ul=$contentBox.find(".contentBox2 ul");
var $li=$contentBox2Ul.find("li");
var ulLength=$contentBox2Ul.length;//ul的总数,房间的数量
var liLength=$li.length;//li的总数,
//每行的li数量，天数
var eachLiLength=liLength/ulLength;
//console.log("ulLength",ulLength);
//console.log("liLength",liLength);
var $hidden=$("#hiddenBox");//遮罩
var liContent=null;//用来装格子的内容
var divTop,divLeft;//格子的相对位置
var liHeight,liWidth,className,x0,y0,thisliIndex,thisUlIndex,xMove,yMove;
var $moveDiv=null;
var leftMax,leftMin,topMax,topMin,xEnd,yEnd,xOver,yOver;
var thisOffsetTop,thisOffsetLeft;//浮动div的相对当前格子的位置
var topNum,leftNum,intTopNum,intLeftNum;//记录移动的坐标点
var endX,endY;//最终的坐标
var eqLi;//最终的坐标对应第几个li
//鼠标点击li
$li.mousedown(function(e){
var $this=$(this);
//如果格子的内容为空，则不拖动
if($this.html()==""){
return false;
}
//获取li的宽度和高度
liHeight=$this.height();
liWidth=$this.width();
//获取li中的内容，和类名
liContent=$this.html();
className=$this.attr("class");
//获取x,y的点击坐标
x0=e.pageX;
y0=e.pageY;
//包裹一层div
$this.wrapInner("<div id='moveDiv'></div>");
$moveDiv=$("#moveDiv");
$moveDiv.addClass(className);//设置包裹div的class
$this.removeClass();//移除当前li的class
//获取li的相对位置，和点击坐标的差值，用于取拖动的范围
divLeft=x0-$moveDiv.offset().left;
divTop=y0-$moveDiv.offset().top;
//console.log("divTop",divTop);
//console.log("divLeft",divLeft);
//获取当前li的位置
thisliIndex=$this.index()+1;//当前坐标x
thisUlIndex=$this.parent().parent().index()+1;//当前坐标y
//$moveDiv.attr("thisliIndex",thisliIndex).attr("thisUlIndex",thisUlIndex);
//console.log("thisliIndex",thisliIndex);
//console.log("thisUlIndex",thisUlIndex);
//释放遮罩
$hidden.css("display","block");
e.stopPropagation();
});
$hidden.mousemove(function(e){
var $this=$(this);
//$moveDiv=$("#moveDiv");
xMove=e.pageX;//移动的x
yMove=e.pageY;//移动的y
//设置边界
leftMax=(eachLiLength-1)*55+divLeft+contentBoxLeft;
leftMin=contentBoxLeft+divLeft;
topMax=(ulLength-1)*56+divTop+contentBoxTop;
topMin=contentBoxTop+divTop;
if(xMove>=leftMax){
xMove=leftMax;
}
if(xMove<=leftMin){
xMove=leftMin;
}
if(yMove>=topMax){
yMove=topMax;
}
if(yMove<=topMin){
yMove=topMin;
}
$moveDiv.css({//框跟着鼠标移动
"left":xMove-x0,
"top":yMove-y0
});
}).mouseup(function(e){
//$moveDiv=$("#moveDiv");
xEnd=e.pageX;//移动到的x
yEnd=e.pageY;//移动到的y
thisOffsetTop=$moveDiv.position().top;//相对表格框的top
thisOffsetLeft=$moveDiv.position().left;//相对表格框的left
//console.log("thisOffsetTop",thisOffsetTop);
//获取移动的相对坐标
topNum=(thisOffsetTop/(parseInt(liHeight)+1));
leftNum=(thisOffsetLeft/(parseInt(liWidth)+1));
intTopNum=Math.round(topNum);
intLeftNum=Math.round(leftNum);
if(topNum-intTopNum<0.5){//如果坐标点小于0.5 则取这个整数
yOver=intTopNum;
}
else {
yOver=intTopNum+1;//如果大于或者=0.5 ，则表示已经移动到了下一个格子
}
if(leftNum-intLeftNum<0.5){//同理
xOver=intLeftNum;
}
else {
yOver=intLeftNum+1;
}
//console.log("xOver",xOver);//最终的相对坐标位置x
//console.log("yOver",yOver);//最终的相对坐标位置y
//console.log("liHeight",liHeight);
//放入指定的格子
endX=xOver+parseInt(thisliIndex);//计算出最终的坐标x
endY=yOver+parseInt(thisUlIndex);//计算出最终的坐标y
//console.log("endX",endX);
//console.log("endY",endY);
//计算出最终的格子对应的是第几个li
eqLi=(endY-1)*(liLength/ulLength)+endX;
//console.log(eqLi);
if($li.eq(eqLi-1).html()==""){//如果要移入的对象为空，就移动过去
$li.eq(eqLi-1).addClass(className).html(liContent);//把之前获取的liContent加入到这个li格子里面
}
else {//如果移入的对象不为空
alert("此处已经被别人占领了！")
$li.eq((thisUlIndex-1)*eachLiLength+thisliIndex-1).addClass(className).html(liContent);
};
$moveDiv.remove();//移除浮动div
$(this).css("display","none");//隐藏遮罩
});
});
</script>
</head>
<body>
<div id="hiddenBox"></div>
<div class="contentRBox">
<div class="contentBox2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="contentBox2">
<ul>
<li></li>
<li class="zhu_on">拖动对象1</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="contentBox2">
<ul>
<li></li>
<li></li>
<li class="ding_on">拖动对象2</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="contentBox2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="contentBox2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="contentBox2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
