jquery-demo
/
333.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery2.0.3.js"></script>
	</head>
	<body>
		<button onclick="set(1,event)">垂直中线对齐</button>
		<button onclick="set(2,event)">左对齐</button>
		<button onclick="set(3,event)">右对齐</button>
		<button onclick="set(4,event)">水平中线对齐</button>
		<button onclick="set(5,event)">上对齐</button>
		<button onclick="set(6,event)">下对齐</button>
		<button onclick="set(7,event)">水平等距分布</button>
		<button onclick="set(8,event)">垂直等距分布</button>
		<hr />
		<div id="111" class="ele drag" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 10px;">111</div>

		<hr />
		<div id="222" class="ele drag" style="border: #000000 solid 0.0625rem;;width:200px;height:100px;
		position: absolute;top:290px;left: 230px;">222</div>
		<div id="333" class="ele drag" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 50px;">333</div>
		<div id="444" class="ele drag" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 100px;">444</div>
		<div id="555" class="ele drag" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:120px;left: 260px;">555</div>
		<div id="666" class="ele drag" style="border: #000000 solid 0.0625rem;width:30px;height:60px;
		position: absolute;top:200px;left: 280px;">666</div>
		<hr />

		<script>
			// 拖拽函数
			$(".drag").on("mousedown",function(e){
				console.log($(this))
				// 获取鼠标离元素(0,0)位置的距离
				var positionDiv = $(this).offset(); //offset 元素的偏移坐标 有两个属性：top left（对显示的元素有用）
				var distenceX = e.pageX - positionDiv.left; //page 显示鼠标指针的位置  （此时相当于，鼠标按下的初始值）
				var distenceY = e.pageY - positionDiv.top; //
				var ele = $(this);
				// 鼠标移动
				$(document).mousemove(function(e) {
					// 获取鼠标的位移（鼠标此时的page值 - 鼠标按下时的初始值 = 元素的移动值）
					var x = e.pageX - distenceX;
					var y = e.pageY - distenceY;
					if (x < 0) {
						x = 0;
					} else if (x > $(document).width() - $(ele).outerWidth(true)) {
						x = $(document).width() - $(ele).outerWidth(true);
					}
					if (y < 0) {
						y = 0;
					} else if (y > $(document).height() - $(ele).outerHeight(true)) {
						y = $(document).height() - $(ele).outerHeight(true);
					}
					$(ele).css({
						'left': x + 'px',
						'top': y + 'px'
					})
				})

				// 鼠标抬起
				$(document).mouseup(function(e) {
					$(document).off('mousemove');
				})
			});

		</script>

	</body>
</html>