【利用jquery，编写拖拽插件】

1.导入一个jquery包并且编写样式：

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{margin: 0;}
			#drag{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>

2.给定一个盒子，利用移入移出的方法进行功能编写,并用var定义方向：

	<div id="drag">
			
		</div>
		<script>
			$("#drag").mousedown(function(e){
//				console.log($("#drag").offset())
				var disX = e.pageX-$("#drag").offset().left
				var disY = e.pageY-$("#drag").offset().top
				
				$(document).mousemove(function(e){
					var l = e.pageX - disX
					var t = e.pageY - disY

3.利用if...else语句将可移动屏幕测量出来:

	if(l<0){
						l = 0
					}else if(l>$(window).width()-$("#drag").width()){
						l = $(window).width()-$("#drag").width()
					}
					if(t<0){
						t = 0
					}else if(t>$(window).height()-$("#drag").height()){
						t = $(window).height()-$("#drag").height()
					}
					$("#drag").css({
						left:l,
						top:t
					})
				})

4.利用mouseup()方法，当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件，实现盒子的拖动，并且不会返回原位置，而是停留在最后的操作：

	$(document).mouseup(function(){
					$(document).off("mousedown")
					$(document).off("mousemove")
				})
				
			})
			
		</script>

5.本题关键方法：mouseup();mousedown();mousemove();if...else()