您好,登錄后才能下訂單哦!
很多時(shí)候我們做網(wǎng)站都會(huì)遇到 JS拖拽的需求,今天就按照一個(gè)彈出框拖拽作為一個(gè)小案例寫(xiě)個(gè)JS原生的代碼。
按照上面的需求咱們開(kāi)始制作一個(gè)拖拽效果吧。
第一步、咱們得寫(xiě)一個(gè)布局和響應(yīng)的css
<div id="box"> <div id="btn">標(biāo)題</div> <p>青格勒前端博客!</p> <p>www.cenggel.com</p></div>
<style> #box{ height:200px; width:200px; background:#999; position:absolute;} #btn{ height:30px; background:#000; cursor:all-scroll; padding:0 10px; color:#fff;}</style>
這里的話咱們id=btn的為拖拽的區(qū)域。
二、邏輯講述
整個(gè)JS代碼不是很多,當(dāng)鼠標(biāo)按下的時(shí)候獲取鼠標(biāo)的位置和id=box的上距和左邊距,然后計(jì)算目前的位置。
然后這時(shí)候鼠標(biāo)移動(dòng)的時(shí)候再次計(jì)算鼠標(biāo)的位置,然后給id=box位置
當(dāng)鼠標(biāo)按鈕松開(kāi)的時(shí)候把onmousemove和onmouseup清除掉
三、JS代碼部分
<script type="text/javascript"> function drag(obtnf,obtn){ //按鈕及初始值 var obtn = document.getElementById(obtn), obtnf = document.getElementById(obtnf), disX = 0, disY = 0; //鼠標(biāo)按下時(shí)開(kāi)始計(jì)算 obtn.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - obtnf.offsetLeft; disY = ev.clientY - obtnf.offsetTop; //鼠標(biāo)按下并移動(dòng)時(shí)計(jì)算 document.onmousemove = function(ev){ var ev = ev || window.event; obtnf.style.left = ev.clientX - disX + 'px'; obtnf.style.top = ev.clientY - disY + 'px'; }; //鼠標(biāo)松開(kāi)時(shí)清除時(shí)間 document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; }; //引用 drag("box","btn")</script> www.gendan5.com
最后咱們的效果如下
做到這里其實(shí)咱們的效果并不完美,應(yīng)為當(dāng)我們拖拽的時(shí)候發(fā)現(xiàn),他能直接被拖到瀏覽器的外面去了,所以咱們?cè)俳o他加點(diǎn)限制。
最終JS代碼如下:
<script type="text/javascript"> function xianzhi(val,max,min){ if (val > max){ return max; }else if(val < min){ return min; }else{ return val; } console.log(val) } function drag(obtnf,obtn){ //按鈕及初始值 var obtn = document.getElementById(obtn), obtnf = document.getElementById(obtnf), disX = 0, disY = 0; //鼠標(biāo)按下時(shí)開(kāi)始計(jì)算 obtn.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - obtnf.offsetLeft; disY = ev.clientY - obtnf.offsetTop; //鼠標(biāo)按下并移動(dòng)時(shí)計(jì)算 document.onmousemove = function(ev){ var ev = ev || window.event; var lefts= (ev.clientX - disX), tops= (ev.clientY - disY), maxle= (document.documentElement.clientWidth - obtnf.offsetWidth), maxto= (document.documentElement.clientHeight - obtnf.offsetHeight) lefts = xianzhi(lefts,maxle,0) tops = xianzhi(tops,maxto,0) obtnf.style.left = lefts + 'px'; obtnf.style.top = tops + 'px'; }; //鼠標(biāo)松開(kāi)時(shí)清除時(shí)間 document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; }; //引用 drag("box","btn")
做到這里一個(gè)小型的拖拽效果就出來(lái)了。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。