js实现拖拽小练习

拖拽的流程

1. 当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2. 当鼠标移动时，被拖拽元素跟随移动 onmousemove
3. 当鼠标松开时，被拖拽元素被固定 onmouseup

对div或者图片的拖拽

要使用户点击图片的位置和拖拽时鼠标的位置一致，要设置div的偏移量

鼠标.clientX-元素.offsetLeft
鼠标.clientY-元素.offsetTop

var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;

提取一个专门用来拖拽的函数

	function drag(obj){
				obj.onmousedown=function(event){
					//求div的偏移量 鼠标.clientX-元素.offsetLeft
					//求div的偏移量 鼠标.clientY-元素.offsetTop
					var ol=event.clientX-obj.offsetLeft;
					var ot=event.clientY-obj.offsetTop;
					
					//为document绑定鼠标跟随事件
					document.onmousemove=function(event){
						//获取鼠标坐标
				    var left=event.clientX-ol;
					var top=event.clientY-ot;
					
					//修改box1的位置
					obj.style.left=left+"px";
					obj.style.top=top+"px";
						
					};
					
					//为document绑定鼠标松开事件
					//不能给box1绑定
					document.onmouseup=function(){
						//取消document.onmousedown事件
						document.onmousemove=false;
					    document.onmouseup=false;//也要取消 
					};
					
				};
			}

代码：