簡(jiǎn)單實(shí)現(xiàn)js拖拽效果
本文實(shí)例為大家分享了js拖拽效果展示的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #box{ position:absolute; top:50%; left:50%; width:200px; height:200px; background:#ff6600; margin:-100px 0 0 -100px; cursor:move; /* 不知道寬高的情況下的居中 position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; */ } </style> </head> <body> <div id='box'> </div> <script> //JS實(shí)現(xiàn)讓當(dāng)前的元素在屏幕居中的位置 var box = document.getElementById('box'); // box.style.top = ((document.documentElement.clientHeight || document.body.clientHeight)-box.offsetHeight)/2 + "px"; // box.style.left = ((document.documentElement.clientWidth || document.body.clientWidth)-box.offsetWidth)/2 + "px"; //拖拽的原理 /* 當(dāng)鼠標(biāo)在盒子上按下的時(shí)候,我們開(kāi)始拖拽(給盒子綁定onmousemove和onmouseup),當(dāng)鼠標(biāo)移動(dòng)的時(shí)候,我們計(jì)算盒子的最新位置 當(dāng)鼠標(biāo)抬起的時(shí)候說(shuō)明拖拽結(jié)束了,我們的move和up就沒(méi)用了,我們?cè)侔堰@兩個(gè)方法移除 */ box.onmousedown = down; function down(e){ e = e || window.event; //記錄開(kāi)始位置的信息 this["strX"] = e.clientX; this["strY"] = e.clientY; this["strL"] = parseFloat(this.style.left); this["strT"] = parseFloat(this.style.top); //給元素綁定移動(dòng)和抬起的事件 if(this.setCapture){ this.setCapture()//把當(dāng)前的鼠標(biāo)和this綁定在一起 this.onmousemove = move; this.onmouseup= up; }else{ var _this = this; document.onmousemove = function(e){ // move(e)//這個(gè)里面的this是window move.call(_this,e); } ; document.onmouseup= function(e){ up.call(_this,e); }; } } function move(e){ e = e || window.event; var curL = (e.clientX-this["strX"])+this["strL"]; var curT = (e.clientY-this["strY"])+this["strT"]; //邊界判斷 var minL = 0,minT = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight; curL = curL < minL ? minL :(curL > maxL ? maxL : curL); curT = curT < minT ? minT :(curT > maxT ? maxT : curT) this.style.left = curL + "px"; this.style.top = curT + "px"; } function up(e){ if(this.releaseCapture){ this.releaseCapture();//把當(dāng)前的鼠標(biāo)和盒子解除綁定 this.onmousemove = null; this.onmouseup= null; }else{ document.onmousemove = null; document.onmouseup= null; //這樣綁定的話,move和up綁定的this都是document } } //當(dāng)鼠標(biāo)移動(dòng)過(guò)快的時(shí)候,我們的鼠標(biāo)會(huì)脫離盒子,導(dǎo)致盒子的mousemove和mouseup事件都移除不到->"鼠標(biāo)焦點(diǎn)丟失" //在IE和火狐瀏覽器中,我們用一個(gè)方法把盒子和鼠標(biāo)綁定在一起即可。 //鼠標(biāo)再快也跑不出去文檔:我們把mousemove和mouseup綁定給document </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)總結(jié)
目前通過(guò)H5頁(yè)面喚起App的場(chǎng)景十分常見(jiàn),比如常見(jiàn)的分享功能,這篇文章主要給大家介紹了關(guān)于H5喚醒APP實(shí)現(xiàn)方法及注意點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-06-06uniapp中scroll-view基礎(chǔ)用法示例代碼
我們?cè)陧?xiàng)目中往往都能遇到實(shí)現(xiàn)左右滑動(dòng)跟上下滑動(dòng)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11javascript 計(jì)算兩個(gè)整數(shù)的百分比值
用來(lái)計(jì)算兩個(gè)整數(shù)的百分比值的代碼,需要的可以看看。2009-12-12JavaScript 產(chǎn)生不重復(fù)的隨機(jī)數(shù)三種實(shí)現(xiàn)思路
在 JavaScript 中,一般產(chǎn)生的隨機(jī)數(shù)會(huì)重復(fù),但是有時(shí)我們需要不重復(fù)的隨機(jī)數(shù),如何實(shí)現(xiàn)?本文給于解決方法,需要的朋友可以參考下2012-12-12js 通過(guò)cookie實(shí)現(xiàn)刷新不變化樹(shù)形菜單
通過(guò)設(shè)置cookie來(lái)保存樹(shù)形菜單的狀態(tài),在頁(yè)面加載時(shí)重新讀取cookie來(lái)設(shè)置菜單2014-10-10Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap教程JS插件滾動(dòng)監(jiān)聽(tīng)學(xué)習(xí)筆記,內(nèi)容很詳細(xì),感興趣的小伙伴們可以參考一下2016-05-05學(xué)習(xí)JavaScript設(shè)計(jì)模式(接口)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹接口,舉例說(shuō)明什么是接口,對(duì)接口進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-11-11使用controller接收js傳過(guò)來(lái)的參數(shù)問(wèn)題
這篇文章主要介紹了使用controller接收js傳過(guò)來(lái)的參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02