萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 鼠標拖拽移動子窗體的JS實現

鼠標拖拽移動子窗體的JS實現

 這篇文章主要介紹了鼠標拖拽移動子窗體的JS實現,需要的朋友可以參考下

1.子窗體   在設計網站的時候,我們需要設計一些模態的子窗體,比如   鼠標拖拽移動子窗體的JS實現    三聯   這一步很容易實現,只需要div+css就ok了,請看代碼:    代碼如下:     <div class="modal-background"></div>     <div class="modal-window">         <div class="head">             <center>點住著塊區域可以改變我的位置</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就可以很容易實現上述模態窗體的效果。其中left: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是為了實現這個模態窗體的居中效果。   當然,模態窗體的大小在樣式類.modal-window中是固定寫好的了,這並不是說不可修改模態窗體的大小,比如我寫如代碼:   代碼如下:     <div class="modal-background"></div>     <div class="modal-window list-window">         <div class="head">             <center>點住著塊區域可以改變我的位置</center>         </div>     </div>     在第二行代碼中追加了.list-window這個樣式類來覆蓋.modal-window類中的大小和位置,但同時保證模態窗體居中顯示    代碼如下: .list-window {     width:600px;     height:400px;     margin-left:-300px;     margin-top:-200px; }     如圖 02.png     可以看得出來,這一步的實現是非常簡單的,掌握幾個關鍵行的css屬性就"完虐"這個模態子窗體,各類其它的模態子窗體可以舉一反三咯。     2.當鼠標點住子窗體的頭部時,如何實現子窗體的拖拽移動呢?當引入jQ後,我們只需要很少的腳本就搞定這個小功能。不信我們看   代碼如下: 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); }     這段代碼非常簡短,能否在各種浏覽器中很流暢的運行。   其實它的實現原理非常簡單,大致分為三步:   ①當鼠標在模態窗體頭部點下(mousedown)時,立即給document綁定mousemove和mouseup事件   ②當鼠標沒有彈起時(沒有mouseup)時,若鼠標在窗體內移動時,激活mouseMove函數,通過計算鼠標移動的距離來及時整個窗體的位置移動。   ③當鼠標彈起(mouseup)時,調用mouseUp事件,將document上綁定的mousemove事件和mouseup事件解除綁定。   整個過程的原理就是:當鼠標mousedown時,鼠標的移動事件轉移到document上來,通過鼠標在document上的移動事件來對整個窗體進行處理。   另外,在mouseMove中有個小技巧,就是全局的left,top變量記錄上一次鼠標停止時的位置,然後下一次移動時鼠標的位置與left,top變量進行對比來確定鼠標移動了多少距離,來對整個模態子窗體做出相應的位置移動即可。   經過這一段代碼的分析,發現鼠標移動窗體乃至document上的任何元素都是相當easy的   比如,如果想要通過拖拽來改變窗體的大小,一樣我們只需要在mouseMove事件處理函數中調整窗體的大小就ok了,是不是又發現自己有多學會了一招,又精進了一小步呢?   有人會問setCapture和releaseCapture分別都是干什麼的呢?其實這是為了兼容IE,僅有IE才有這倆函數,在此鄙視IE。setCapture可以讓當前元素捕獲鼠標的所有事件,如果不使用它們,可能不兼容IE浏覽器哦。    
copyright © 萬盛學電腦網 all rights reserved