Javascript:简单拖拽效果的实现

  

核心代码：

/*
*完成一个拖拽事件由三大事件组成：
*1：onmousedown:选择元素
*2：onmousemove:移动元素
*3：onmouseup:释放元素
 */
function drag(obj){

obj.onmousedown=function(ev){
	var ev=ev || event;
	var disX=ev.clientX-this.offsetLeft;
	var disY=ev.clientY-this.offsetTop;
	//IE下选中文字后移动时，文字跟着移动的BUG
	if(obj.setCapture){
       obj.setCapture();
	}
	document.onmousemove=function(ev){
      
      //此时采用document，而不采用obj，是因为采用obj时，鼠标移动太快，obj会跟不上鼠标的速度，而采用document，只要鼠标不脱离文档流，obj都可以灵活移动
      var L=ev.clientX-disX;
      var T=ev.clientY-disY;
      var maxL=document.documentElement.clientWidth-obj.offsetWidth;
      if(L<200){
      	//设置移动边界值
      	//直接改变L值，比如200,可以实现磁性吸附效果
      	L=0;
      } else if(L>maxL){
        L=maxL;
      }
      obj.style.left=L+'px';
      obj.style.top=T+'px';
	}
	return false;	
}

obj.onmouseup=function(){
	document.onmousemove=document.onmouseup=null;	
    if(obj.releaseCapture){
       obj.releaseCapture();
	}
	return false;
}

}

 

DEMO:

在线演示:http://codepen.io/anon/pen/OVBEpM

<div id="words">这是文字这是文字这是文字这是文字这是文字</div>
 <div id="div1"></div>

<script>
var oDiv=document.getElementById('div1');
var oWords=document.getElementById('words');

drag(oDiv);
drag(oWords);
</script>