jQuery 拖拽div

功能实现：
1、鼠标按键按下拖拽div
2、div不能超出边框
3、鼠标按键抬起停止拖拽

实现样式

HTML实现

<div id="wrap">
	<div id="box"></div>
</div>

css实现

#wrap {
	width: 500px;
	height: 500px;
	margin: 0px auto;
	border: 2px solid red;
	position: relative;
}

#box {
	width: 50px;
	height: 50px;
	background-color: #0000FF;
	position: absolute;
}

实现效果
js实现

$("#box").mousedown(function (event) {

	// 指针相对于小盒子的偏移量,鼠标相对于窗口的坐标-小盒子相对于窗口的偏移量
	var xbox = event.pageX - $("#box").offset().left;
	var ybox = event.pageY - $("#box").offset().top;

	console.log(xbox, ybox);
	// 鼠标移动事件
	$(document).mousemove(function (eve) {
		// 鼠标相对于窗口的坐标
		var x = eve.pageX;
		var y = eve.pageY;

		// 大盒子相对于窗口的偏移量
		var wrapx = $("#wrap").offset().left;
		var wrapy = $("#wrap").offset().top;

		// 大盒子的宽高，小盒子的宽高
		var wrapw = $("#wrap").width();
		var wraph = $("#wrap").height();
		var boxw = $("#box").width();
		var boxh = $("#box").height();

		// 小盒子移动
		var movex = x - xbox - wrapx;
		var movey = y - ybox - wrapy;
		// 临界值判断
		// 小盒子不能超过大盒子左侧
		if (movex <= 0) {
			movex = 0;
		}
		// 不能超过右侧
		if (movex >= wrapw - boxw) {
			movex = wrapw - boxw;
		}
		// 不能超过上面
		if (movey <= 0) {
			movey = 0;
		}
		// 不能超过下面
		if (movey >= wraph - boxh) {
			movey = wraph - boxh;
		}
		// 检测值是否正确
		console.log(movex, movey);

		// 移动效果，改变left和top值
		$("#box").css({
			"left": movex + "px",
			"top": movey + "px"
		});

	});
});

// 鼠标松开时，小盒子不移动
$(document).mouseup(function () {
	// 使用off事件取消绑定事件
	$(document).off("mousemove");
});