小編給大家分享一下js怎么實現(xiàn)彈出框的拖拽效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

具體代碼如下所示：

//HTML部分
<div class="wrap"></div>
<div class="popUpBox">
　　<div class="layer-head"><div class="layer-head-text">彈出框</div><div class="layer-close"></div></div>
　　<div class="layer-body"></div>
　　<div class="layer-footer">
　　　　<div class="layer-footer-button-group">
　　　　　　<div class="layer-footer-button layer-sure">確定</div>
　　　　　　<div class="layer-footer-button layer-cancel">取消</div>
　　　　</div>
　　</div>
</div>
//CSS部分
.wrap {
position: fixed;
left: 0;
top: 0;
background-color: #000;
z-index: 10000;
  opacity: 0.3;
}
.popUpBox {
　　height: 400px;
　　width: 700px;
　　position: absolute;
　　overflow: hidden;
　　box-sizing: border-box;
　　z-index: 10000;
　　background-color: #fff;
　　border-radius: 2px;
　　box-shadow: 1px 1px 50px rgba(0,0,0,.3);
}
.layer-head {
　　width: 100%;
　　height: 35px;
　　border-bottom: 1px solid #eee;
　　box-sizing: border-box;
　　background-color: #f8f8f8;
　　border-radius: 4px 4px 0 0;
　　cursor: move;
}
.layer-head-text {
　　padding-left: 20px;
　　font-size: 14px;
　　color: #333;
　　height: 35px;
　　line-height: 34px;
　　float: left;
}
.layer-close {
　　float: right;
　　width: 16px;
　　height: 16px;
　　background-image: url(../images/close_hover.png);
　　background-repeat:no-repeat;
　　background-size:100% 100%;
　　position: absolute;
　　top: 10px;
　　right: 12px;
　　cursor: pointer;
}
.layer-body {
　　width: 100%;
　　height: calc(100% - 73px);
}
.layer-footer {
　　width: 100%;
　　height: 38px;
　　border-top: 1px solid #eee;
　　box-sizing: border-box;
　　background-color: #f8f8f8;
　　border-radius: 0 0 4px 4px;
}
.layer-footer-button-group {
　　padding: 5px 0 5px 576px;
　　height: 28px;
}
.layer-footer-button {
　　width: 56px;
　　height: 28px;
　　line-height: 28px;
　　margin-right: 6px;
　　box-sizing: border-box;
　　font-size: 12px;
　　float: left;
　　text-align: center;
　　cursor: pointer;
}
.layer-sure {
　　border: 1px solid #4898d5;
　　background-color: #2e8ded;
　　color: #fff;
}
.layer-cancel {
　　border: 1px solid #dedede;
　　background-color: #f1f1f1;
　　color: #333;
}
//點擊某物體時，用drag對象即可，move和up是全局區(qū)域，也就是整個文檔通用，應(yīng)該使用document對象而不是drag對象(否則，采用drag對象時物體只能往右方或下方移動)
$(document).on('mousedown', '.layer-head', function(e) {
　　e = e || window.event; //兼容ie瀏覽器
　　var drag = $(this).parent();
　　$('body').addClass('select'); //webkit內(nèi)核和火狐禁止文字被選中
　　document.body.onselectstart = document.body.ondrag = function() { //ie瀏覽器禁止文字選中
　　return false;
}
if ($(e.target).hasClass('layer-close')) { //點關(guān)閉按鈕不能拖拽模態(tài)框
　　return;
}
　　var diffX = e.clientX - drag.offset().left; //鼠標點擊物體那一刻相對于物體左側(cè)邊框的距離=點擊時的位置相對于瀏覽器最左邊的距離-物體左邊框相對于瀏覽器最左邊的距離
　　var diffY = e.clientY - drag.offset().top;
　　$(document).on('mousemove', function(e) {
　　　　e = e || window.event; //兼容ie瀏覽器 
　　　　var left = e.clientX - diffX; 
　　　　var top = e.clientY - diffY;
　　　　if (left < 0) { 
　　　　　　left = 0; 
　　　　} else if (left > window.innerWidth - drag.width()) { 
　　　　　　left = window.innerWidth - drag.width(); 
　　　　}
　　　　if (top < 0) { 
　　　　　　top = 0; 
　　　　} else if (top > window.innerHeight - drag.height()){ 
　　　　　　top = window.innerHeight - drag.height(); 
　　　　}
　　　　//移動時重新得到物體的距離，解決拖動時出現(xiàn)晃動的現(xiàn)象
　　　　drag.css({
　　　　　　'left': left + 'px',
　　　　　　'top': top + 'px'
　　　　});
　　});
　　$(document).on('mouseup', function(e) { //當鼠標彈起來的時候不再移動 
　　　　$(document).unbind("mousemove");
　　　　$(document).unbind("mouseup");
　　});
});

看完了這篇文章，相信你對“js怎么實現(xiàn)彈出框的拖拽效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當前文章：js怎么實現(xiàn)彈出框的拖拽效果-創(chuàng)新互聯(lián)
標題鏈接：http://www.chinadenli.net/article26/dpohcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、ChatGPT、商城網(wǎng)站、網(wǎng)站收錄、全網(wǎng)營銷推廣、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)