前端外掛之拖拽
阿新 • • 發佈:2018-12-23
1.拖拽的外掛很多,其實我們只要明白他的原理,就不難了:
之所以形成拖拽的效果,是在滑鼠按下onmousedown的時候記錄滑鼠座標與被拖拽div左邊界,上邊界的距離disX,disY,在拖動onmousemove的時候,講拖動時滑鼠的x座標oEv.clientX-disX;得到的這個值應該是拖動情況下,div的left;同理,投票也是:
2.js程式碼:
2.html程式碼: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; };
<div id="box">
<input type="text">
3.css程式碼,當然很簡單
*{margin:0;padding:0;}
#box{width:200px;height:200px;background:#ccc;position:absolute;}