鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
1.子窗體
在設(shè)計(jì)網(wǎng)站的時(shí)候,我們需要設(shè)計(jì)一些模態(tài)的子窗體,比如

這一步很容易實(shí)現(xiàn),只需要div+css就ok了,請(qǐng)看代碼:
<div class="modal-background"></div>
<div class="modal-window">
<div class="head">
<center>點(diǎn)住著塊區(qū)域可以改變我的位置</center>
</div>
</div>
.modal-background
{
background-color: #999999;
bottom: 0;
left: 0;
opacity: 0.3;
position: fixed;
right: 0;
top: 0;
z-index: 1100;
}
.modal-window
{
background-color: #FFFFFF;
border: 1px solid #6B94AD;
box-shadow: 5px 5px 5px #6B94AD;
font-family: 'Microsoft YaHei';
font-size: 12px;
height: 120px;
left: 50%;
margin-left: -160px;
margin-top: -160px;
opacity: 1;
position: fixed;
top: 50%;
width: 320px;
z-index: 1110;
}
.modal-window .head
{
height: 25px;
color: #fff;
font-weight: 600;
background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); /* IE*/
}
.modal-window .head center
{
padding-top: 2px;
}
加上上述html和css就可以很容易實(shí)現(xiàn)上述模態(tài)窗體的效果。其中l(wèi)eft: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是為了實(shí)現(xiàn)這個(gè)模態(tài)窗體的居中效果。
當(dāng)然,模態(tài)窗體的大小在樣式類.modal-window中是固定寫好的了,這并不是說(shuō)不可修改模態(tài)窗體的大小,比如我寫如代碼:
<div class="modal-background"></div>
<div class="modal-window list-window">
<div class="head">
<center>點(diǎn)住著塊區(qū)域可以改變我的位置</center>
</div>
</div>
在第二行代碼中追加了.list-window這個(gè)樣式類來(lái)覆蓋.modal-window類中的大小和位置,但同時(shí)保證模態(tài)窗體居中顯示
.list-window
{
width:600px;
height:400px;
margin-left:-300px;
margin-top:-200px;
}
如圖

可以看得出來(lái),這一步的實(shí)現(xiàn)是非常簡(jiǎn)單的,掌握幾個(gè)關(guān)鍵行的css屬性就"完虐"這個(gè)模態(tài)子窗體,各類其它的模態(tài)子窗體可以舉一反三咯。
2.當(dāng)鼠標(biāo)點(diǎn)住子窗體的頭部時(shí),如何實(shí)現(xiàn)子窗體的拖拽移動(dòng)呢?當(dāng)引入jQ后,我們只需要很少的腳本就搞定這個(gè)小功能。不信我們看
var left, top, $this;
$(document).delegate('.modal-window .head', 'mousedown', function (e) {
left = e.clientX, top = e.clientY, $this = $(this).css('cursor', 'move');
this.setCapture ? (
this.setCapture(),
this.onmousemove = function (ev) { mouseMove(ev || event); },
this.onmouseup = mouseUp
) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
var target = $this.parents('.modal-window');
var l = Math.max((e.clientX - left + Number(target.css('margin-left').replace(/px$/, '')) || 0), -target.position().left);
var t = Math.max((e.clientY - top + Number(target.css('margin-top').replace(/px$/, '')) || 0), -target.position().top);
l = Math.min(l, $(window).width() - target.width() - target.position().left);
t = Math.min(t, $(window).height() - target.height() - target.position().top);
left = e.clientX;
top = e.clientY;
target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp(e) {
var el = $this.css('cursor', 'default').get(0);
el.releaseCapture ?
(
el.releaseCapture(),
el.onmousemove = el.onmouseup = null
) : $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}
這段代碼非常簡(jiǎn)短,能否在各種瀏覽器中很流暢的運(yùn)行。
其實(shí)它的實(shí)現(xiàn)原理非常簡(jiǎn)單,大致分為三步:
①當(dāng)鼠標(biāo)在模態(tài)窗體頭部點(diǎn)下(mousedown)時(shí),立即給document綁定mousemove和mouseup事件
②當(dāng)鼠標(biāo)沒有彈起時(shí)(沒有mouseup)時(shí),若鼠標(biāo)在窗體內(nèi)移動(dòng)時(shí),激活mouseMove函數(shù),通過計(jì)算鼠標(biāo)移動(dòng)的距離來(lái)及時(shí)整個(gè)窗體的位置移動(dòng)。
③當(dāng)鼠標(biāo)彈起(mouseup)時(shí),調(diào)用mouseUp事件,將document上綁定的mousemove事件和mouseup事件解除綁定。
整個(gè)過程的原理就是:當(dāng)鼠標(biāo)mousedown時(shí),鼠標(biāo)的移動(dòng)事件轉(zhuǎn)移到document上來(lái),通過鼠標(biāo)在document上的移動(dòng)事件來(lái)對(duì)整個(gè)窗體進(jìn)行處理。
另外,在mouseMove中有個(gè)小技巧,就是全局的left,top變量記錄上一次鼠標(biāo)停止時(shí)的位置,然后下一次移動(dòng)時(shí)鼠標(biāo)的位置與left,top變量進(jìn)行對(duì)比來(lái)確定鼠標(biāo)移動(dòng)了多少距離,來(lái)對(duì)整個(gè)模態(tài)子窗體做出相應(yīng)的位置移動(dòng)即可。
經(jīng)過這一段代碼的分析,發(fā)現(xiàn)鼠標(biāo)移動(dòng)窗體乃至document上的任何元素都是相當(dāng)easy的
比如,如果想要通過拖拽來(lái)改變窗體的大小,一樣我們只需要在mouseMove事件處理函數(shù)中調(diào)整窗體的大小就ok了,是不是又發(fā)現(xiàn)自己有多學(xué)會(huì)了一招,又精進(jìn)了一小步呢?
有人會(huì)問setCapture和releaseCapture分別都是干什么的呢?其實(shí)這是為了兼容IE,僅有IE才有這倆函數(shù),在此鄙視IE。setCapture可以讓當(dāng)前元素捕獲鼠標(biāo)的所有事件,如果不使用它們,可能不兼容IE瀏覽器哦。
- 使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例
- JS鼠標(biāo)拖拽實(shí)例分析
- jsMind通過鼠標(biāo)拖拽的方式調(diào)整節(jié)點(diǎn)位置
- js實(shí)現(xiàn)鼠標(biāo)拖拽div左右滑動(dòng)
- JavaScript鼠標(biāo)拖拽事件詳解
- 超酷的鼠標(biāo)拖拽翻頁(yè)(分頁(yè))效果實(shí)現(xiàn)javascript代碼
- js實(shí)現(xiàn)鼠標(biāo)拖拽縮放div實(shí)例代碼
- JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果
相關(guān)文章
Javascript中Fetch請(qǐng)求Coze API并流式展示請(qǐng)求結(jié)果
文章介紹了如何使用Fetch API處理CozeAPI返回的流式響應(yīng),并在前端進(jìn)行實(shí)時(shí)展示,文章提供了處理流式響應(yīng)的步驟和示例代碼,包括使用fetch發(fā)起POST請(qǐng)求、讀取響應(yīng)體流、逐步處理數(shù)據(jù)塊以及更新UI,感興趣的朋友一起看看吧2025-02-02
JavaScript ES6的新特性使用新方法定義Class
這篇文章主要介紹了JavaScript ES6的新特性使用新方法定義Class 的相關(guān)資料,需要的朋友可以參考下2016-06-06
JS檢測(cè)是否可以訪問公網(wǎng)服務(wù)器功能代碼
檢測(cè)AC是否放行成功,是否可以訪問公網(wǎng)阿里云服務(wù)器。下面給大家分享JS檢測(cè)是否可以訪問公網(wǎng)服務(wù)器功能代碼,需要的的朋友參考下吧2017-06-06
JavaScript前端實(shí)現(xiàn)拼圖分割效果
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript前端實(shí)現(xiàn)拼圖分割效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
Js 回車換行處理的辦法及replace方法應(yīng)用
當(dāng)我們?cè)谖谋究蚶镙斎胛淖智孟禄剀嚭?,希望在提交后網(wǎng)頁(yè)也顯示是換行的效果,可往往并不能如愿以償啊,實(shí)在是憤怒啊自己寫了一個(gè)回車換行處理的函數(shù),感興趣的朋友可以了解下啊,希望本文對(duì)你有所幫助2013-01-01
layui實(shí)現(xiàn)table加載的示例代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)table加載的示例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
js中區(qū)分深拷貝與淺拷貝的實(shí)戰(zhàn)過程
兩個(gè)對(duì)象A、B,A有數(shù)據(jù)B為空,B復(fù)制了A,我們修改A,如果B中的數(shù)據(jù)跟著變化了,那就是淺拷貝,如果沒有變化,那就是深拷貝,下面這篇文章主要給大家介紹了關(guān)于js中區(qū)分深拷貝與淺拷貝的相關(guān)資料,需要的朋友可以參考下2022-01-01

