前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：

之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX，disY，在拖动onmousemove的时候，讲拖动时鼠标的x坐标oEv.clientX-disX;得到的这个值应该是拖动情况下，div的left；同理，投票也是：

2.js代码：

var oBox=document.getElementById('box');var oPut=oBox.getElementsByTagName('input')[0]; oBox.onmousedown=function(ev){ oEv=ev || window.event; var disX=oEv.clientX-oBox.offsetLeft; var disY=oEv.clientY-oBox.offsetTop; document.onmousemove=function(ev){oEv=ev || window.event;//console.log(oEv.clientX,oEv.clientY)var w=oEv.clientX-disX;var h=oEv.clientY-disY;oBox.style.left=w+"px";oBox.style.top=h+"px";if(w>document.documentElement.clientWidth-oBox.offsetWidth){oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+'px';};if(w<0){oBox.style.left="0";};if(h>document.documentElement.clientHeight-oBox.offsetHeight){oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+'px';};if(h<0){oBox.style.top="0";};}; oBox.onmouseup=function(){ document.onmousemove=null;};};//---------------------------oPut.onmousedown=function(ev){oEv=ev || window.event;oEv.cancelBubble=true;};

2.html代码：

<div id="box"><input type="text">

3.css代码，当然很简单

*{margin:0;padding:0;}
#box{width:200px;height:200px;background:#ccc;position:absolute;}