div拖动布局drag.js

html 复制代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>drag.js</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script> 
    <script type="text/javascript" src="drag.js"></script> 
    <style>
		html,body{background-color:#101028;height:100%;width:100%;padding:0;margin:0}
		.box {
			width:300px;
			height:200px;
			border: 1px solid #fff;
			color: #fff
		}
    </style>
	<script>
		$(document).ready(function(){
			$("#box1").dragging({ 
				move : 'both', 
				randomPosition : true, //是否随机显示位置
				left: 20,
				top: 30
			});
			$("#box2").dragging({ 
				move : 'both', 
				randomPosition : false,
				left: 150,
				top: 200
			});
		})
	</script>
</head>
<body>
    <div class="box" id="box1">abcde</div>
    <div class="box" id="box2">234</div>
</body>
</html>

drag.js

javascript 复制代码

$.fn.extend({
	dragging:function(data){
		var $this = $(this);
		var xPage;
		var yPage;
		var X;
		var Y;
		var xRand = 0;
		var yRand = 0;
		var father = $this.parent();
		var defaults = {
			move : 'both',
			randomPosition : true,
			hander:1,
			top: 0,
			left: 0
		}
		var opt = $.extend({},defaults,data);
		var movePosition = opt.move;
		var random = opt.randomPosition;

		var hander = opt.hander;

		if(hander == 1){
			hander = $this; 
		}else{
			hander = $this.find(opt.hander);
		}

		//---初始化
		father.css({"position":"relative","overflow":"hidden"});
		$this.css({"position":"absolute"});
		hander.css({"cursor":"move"});

        //元素使用box-sizing:content-box时不包括padding和border，加上
		var faWidth = Math.ceil(father.width());
		var thisWidth = Math.ceil($this.width())
							+ Math.ceil(parseFloat($this.css('padding-left')))
							+ Math.ceil(parseFloat($this.css('padding-right')))
							+ Math.ceil(parseFloat($this.css('border-left-width')))
							+ Math.ceil(parseFloat($this.css('border-right-width')));

		var faHeight = Math.ceil(father.height());
		var thisHeight = Math.ceil($this.height())
							+ Math.ceil(parseFloat($this.css('padding-top')))
							+ Math.ceil(parseFloat($this.css('padding-bottom')))
							+ Math.ceil(parseFloat($this.css('border-top-width')))
							+ Math.ceil(parseFloat($this.css('border-bottom-width')));

		var mDown = false;
		var positionX;
		var positionY;
		var moveX ;
		var moveY ;

		(function(){ //随机函数
			$this.each(function(index){
				var randY = random ? parseInt(Math.random()*(faHeight-thisHeight)) : opt.top;
				var randX = random ? parseInt(Math.random()*(faWidth-thisWidth)) : opt.left;
				if(movePosition.toLowerCase() == 'x'){
					$(this).css({
						left:randX
					});
				}else if(movePosition.toLowerCase() == 'y'){
					$(this).css({
						top:randY
					});
				}else if(movePosition.toLowerCase() == 'both'){
					$(this).css({
						top:randY,
						left:randX
					});
				}
				
			});
		})();

		hander.mousedown(function(e){
			father.children().css({"zIndex":"0"});
			$this.css({"zIndex":"1"});
			mDown = true;
			X = e.pageX;
			Y = e.pageY;
			positionX = $this.position().left;
			positionY = $this.position().top;
			return false;
		});

		$this.mouseup(function(e){
			mDown = false;
			//保存位置信息
			console.log($this.attr("id"));
			console.log("top:" + $this.css("top"), "left:" + $this.css("left"));
		});

		$this.mousemove(function(e){
			xPage = e.pageX;
			moveX = positionX+xPage-X;

			yPage = e.pageY;
			moveY = positionY+yPage-Y;

			function thisXMove(){ //x轴移动
				if(mDown == true){
					$this.css({"left":moveX});
				}else{
					return;
				}
				if(moveX < 0){
					$this.css({"left":"0"});
				}
				if(moveX > (faWidth-thisWidth)){
					$this.css({"left":faWidth-thisWidth});
				}
				return moveX;
			}

			function thisYMove(){ //y轴移动
				if(mDown == true){
					$this.css({"top":moveY});
				}else{
					return;
				}
				if(moveY < 0){
					$this.css({"top":"0"});
				}
				if(moveY > (faHeight-thisHeight)){
					$this.css({"top":faHeight-thisHeight});
				}
				return moveY;
			}

			function thisAllMove(){ //全部移动
				if(mDown == true){
					$this.css({"left":moveX,"top":moveY});
				}else{
					return;
				}
				if(moveX < 0){
					$this.css({"left":5});
				}
				if(moveX > (faWidth-thisWidth)){
					$this.css({"left":faWidth-thisWidth-5});
				}

				if(moveY < 0){
					$this.css({"top":5});
				}
				if(moveY > (faHeight-thisHeight)){
					$this.css({"top":faHeight-thisHeight-5});
				}
			}

			if(movePosition.toLowerCase() == "x"){
				thisXMove();
			}else if(movePosition.toLowerCase() == "y"){
				thisYMove();
			}else if(movePosition.toLowerCase() == 'both'){
				thisAllMove();
			}
		});

	}
});