本文實例為大家分享了js拖拽效果展示的具體代碼，供大家參考，具體內容如下
<!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實現讓當前的元素在屏幕居中的位置 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"; //拖拽的原理 /* 當鼠標在盒子上按下的時候，我們開始拖拽（給盒子綁定onmousemove和onmouseup），當鼠標移動的時候，我們計算盒子的最新位置 當鼠標抬起的時候說明拖拽結束了，我們的move和up就沒用了，我們再把這兩個方法移除 */ box.onmousedown = down; function down(e){ e = e || window.event; //記錄開始位置的信息 this["strX"] = e.clientX; this["strY"] = e.clientY; this["strL"] = parseFloat(this.style.left); this["strT"] = parseFloat(this.style.top); //給元素綁定移動和抬起的事件 if(this.setCapture){ this.setCapture()//把當前的鼠標和this綁定在一起 this.onmousemove = move; this.onmouseup= up; }else{ var _this = this; document.onmousemove = function(e){ // move(e)//這個里面的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();//把當前的鼠標和盒子解除綁定 this.onmousemove = null; this.onmouseup= null; }else{ document.onmousemove = null; document.onmouseup= null; //這樣綁定的話，move和up綁定的this都是document } } //當鼠標移動過快的時候，我們的鼠標會脫離盒子，導致盒子的mousemove和mouseup事件都移除不到->"鼠標焦點丟失" //在IE和火狐瀏覽器中，我們用一個方法把盒子和鼠標綁定在一起即可。 //鼠標再快也跑不出去文檔:我們把mousemove和mouseup綁定給document </script></body></html>
新聞熱點
疑難解答
圖片精選
