元素拖拽及原理（举例讲解）

  首先定义一个我们想要拖拽的元素

//这里我以一个盒子为例
<div id="div"></div>

  给这个想要拖拽的元素一个CSS样式

 <style>
 	/* 清除浏览器默认样式 */
  	* {
  		margin: 0;
        padding: 0;
      }
	/* 给盒子定义一些属性 */
    #div{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0px;
         top: 0px;
       }
    </style>

  之后，我们需要对拖拽进行分析。拖拽就是当我们按住鼠标左键的时候，需要拖拽的元素会跟着鼠标一起移动，当我们松开鼠标的时候，需要拖拽的元素会随之停止。

onmousedown = function(){
	onmousemove = function(){
	}
	onmouseup =function(){
		//当我们松开鼠标的时候，盒子需要停止
		onmousemove = null;
	}
}

  之后我们需要知道，当我们拖拽元素的时候，改变的是元素的left和top。所以我们需要对left和top进行操作。

    div.style.left = event.clientX + 'px';
    div.style.top = event.clientY + 'px';

  但是此时有一个问题,鼠标拖拽的时候，无论点元素的哪个位置，拖拽的时候元素的左上角都会移动到鼠标位置再开始移动，所以我们需要让鼠标无论在元素的哪个位置都可以实现拖拽。

	//这里的event.client是鼠标到页面的距离
	var l = event.clientX - div1.offsetLeft;
	var t = event.clientY - div1.offsetTop;
	onmousemove = function(){
		//这里的event.client是到元素边框的距离
		//event.clientX,event.clientY;
		div.style.left = event.clientX - l + 'px';
		div.style.top  = event.clientY - t + 'px';
		};
	onmouseup = function(){
		onmousemove = null;
	}

  为了使鼠标只有在元素内部的时候才能实现拖拽，所以需要对onmousemove、onmousedown和onmouseup进行设置。

	div.onmousedown = function(){
		var l = event.clientX - div1.offsetLeft;
		var t = event.clientY - div1.offsetTop;
		document.onmousemove = function(){
			//event.clientX,event.clientY;
		div.style.left = event.clientX - l + 'px';
		div.style.top  = event.clientY - t + 'px';
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	}

  拖拽效果实现之后，对拖拽进行优化，使其不能超出页面的边框。

	div.onmousedown = function(){
		var l = event.clientX - div1.offsetLeft;
		var t = event.clientY - div1.offsetTop;
		document.onmousemove = function(){
			//event.clientX,event.clientY;
		var needX = event.clientX - l;
			var needY = event.clientY - t;
			if(needX<0){
				needX = 0;
			}
			if(needY<0){
				needY = 0;
			}
			if(needY>innerHeight - div1.offsetHeight){
				needY = innerHeight - div1.offsetHeight;
			}
			if(needX>innerWidth - div1.offsetWidth){
				needX = innerWidth - div1.offsetWidth;
			}
			div.style.left = needX + 'px';
			div.style.top  = needY + 'px';
		};
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
		};
		return false;
	}