素材网 素材网

jquery制作拖动层代码事例

下载资源()次

阅读次数()次

发布时间:2014-03-21

jquery制作拖动层代码事例
分享到:

用法简介:

来源:xw素材网

jquery制作拖动层代码事例。
文件引用:

<script type="text/javascript" src="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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。