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.οnmοusedοwn=function(ev){
oEv=ev || window.event;
var disX=oEv.clientX-oBox.offsetLeft;
var disY=oEv.clientY-oBox.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
};
};
//---------------------------
oPut.οnmοusedοwn=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;}