本文為大家分享了原生彈窗拖拽代碼demo，供大家參考，具體內(nèi)容如下

效果圖：

實(shí)現(xiàn)代碼：

彈窗拖拽

*{margin:0;padding:0;}

.box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #}

.move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000;}

.move:hover{cursor: move;}

.close{position: absolute;width: 30px;height: 30px;top:0px;right:0px;background:red;text-align: center;line-height: 30px;}

window.οnlοad=function(){

var oMove=document.getElementById('move');

// 拖曳

oMove.οnmοusedοwn=fnDown;

// 關(guān)閉

var oClose=document.getElementById('close');

oClose.οnclick=function(){

document.getElementById('box').style.display='none';

}

}

function fnDown(event){

event = event || window.event;

var oDrag=document.getElementById('box'),

// 光標(biāo)按下時(shí)光標(biāo)和面板之間的距離

disX=event.clientX-oDrag.offsetLeft,

disY=event.clientY-oDrag.offsetTop;

// 移動(dòng)

document.οnmοusemοve=function(event){

event = event || window.event;

var l=event.clientX-disX,

t=event.clientY-disY,

// 最大left,top值

leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDrag.offsetWidth,

topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDrag.offsetHeight;

if(l<0) l=0;

if(l>leftMax) l=leftMax;

if(t<0) t=0;

if(t>topMax) t=topMax;

oDrag.style.left=l+'px';

oDrag.style.top=t+'px';

}

// 釋放鼠標(biāo)

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

}

拖拽區(qū)域X

主要注意幾點(diǎn)：

1.event，IE兼容問題

2.點(diǎn)擊鼠標(biāo)時(shí)要先判斷鼠標(biāo)與面板之間的距離

3.要判斷彈窗與瀏覽器整個(gè)區(qū)域的距離，不能讓彈窗跑出瀏覽器外的區(qū)域

4.松開鼠標(biāo)要解除事件綁定，不然會(huì)有bug

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html 弹窗实现拖拽,原生js实现自由拖拽弹窗代码demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。