【JS练习】拖拽

鼠标按下事件：onmousedown
鼠标移动事件：onmousemove
鼠标松开事件：onmouseup

一个盒子，可以根据鼠标的拖拽进行移动

1.鼠标按下时开始拖拽

该事件绑定给box01

2.鼠标移动时，被拖拽元素跟着鼠标一起移动

该事件绑定给document
鼠标移动，被拖拽元素也跟着移动，根据鼠标的坐标改变被拖拽元素的坐标可以实现该功能
event.clientX 鼠标当前的x值
event.clientY 鼠标当前的y值
把这两个值分别给盒子的左边距和上边距即可

3.鼠标松开时，取消拖拽，被拖拽元素就固定在停止拖拽的位置

绑定给document，如果绑定给box01的话，当页面中有其他的块的时候，如果移动到那个块底下，无法鼠标松开的事件，就是你在这即使鼠标松开了也没用。
就是下面这种情况：

所以要绑定给document，无论在网页的哪个地方，我松开都有用。

代码：

<script>
			window.onload=function(){
				
				var box01=document.getElementById("box01");
				//1.给box1绑定一个鼠标按下事件
				box01.onmousedown=function(){
					// alert("鼠标在box1中按下");
					//2.鼠标移动时，对box1进行拖拽，即改变方块所在位置
					//如果给box绑定，只能向下移动，往上就出去了，所以要给document绑定
					document.onmousemove=function(event){
						// alert("开始拖拽");
						event=event||window.event;
						var left=event.clientX;
						var top=event.clientY;
						box01.style.left=left+"px";
						box01.style.top=top+"px";
						
					}
					//3.鼠标松开时，被拖拽元素固定在放下的位置
					//如果用box01的话，如果存在别的块，就无法取消拖拽事件了，所以要给document绑定
					//不管在哪松，都可以松掉
						document.onmouseup=function(event){
							//取消鼠标移动和鼠标按下的的事件
						document.onmousemove=null;
						//完成拖拽之后，取消掉鼠标松开事件，不然点别的地方其实还是会触发鼠标松开事件
						document.onmouseup=null;
					}
				}
			}
		</script>

有几个改进的地方:

1.鼠标永远在拖拽元素的左上角

减去偏移量
注意这个偏移量是在块没有移动之前计算的 一旦开始移动 就变成灰色的那个client.clientX了

box01.onmousedown = function() {
						var lp=event.clientX-box01.offsetLeft;
						var tp=event.clientY-box01.offsetTop;
						
					document.onmousemove = function(event) {
						event = event || window.event;		
									
						var left = event.clientX-lp;
						var top = event.clientY-tp;
						
						box01.style.left = left + "px";
						box01.style.top = top + "px";
					}

这样就是点击哪里拖，鼠标就一直在那，不会跑到左上角了。
2. 如果有其他的需要拖拽的元素 希望点击它也可以实现拖拽的功能
解决办法:封装成函数

window.onload = function() {

				var box01 = document.getElementById("box01");
				var box02 = document.getElementById("box02");
				drag(box01);
				drag(box02);
				function drag(obj) {
					obj.onmousedown = function() {
	
						var lp = event.clientX - obj.offsetLeft;
						var tp = event.clientY - obj.offsetTop;
						document.onmousemove = function(event) {
							event = event || window.event;

							var left = event.clientX - lp;
							var top = event.clientY - tp;
							obj.style.left = left + "px";
							obj.style.top = top + "px";
						}
						document.onmouseup = function(event) {
							document.onmousemove = null;
							document.onmouseup = null;
						}
					}
				}
			}

这样，使用的时候只需要调用drag拖拽函数就可以了。