<fieldset id="megy0"></fieldset>

<ul id="megy0"></ul><strike id="megy0"><rt id="megy0"></rt></strike>

JS實現博客前端頁面（五） —— 封裝彈窗拖拽事件

mozillazg 發布于2019-08-22 10:38 / 1448人閱讀

摘要：在實現博客前端頁面四中已經實現了對彈窗組件的封裝，現在我們想要在瀏覽器窗口內可以對彈窗進行拖拽移動，就需要封裝拖拽事件。

在JS實現博客前端頁面（四）中已經實現了對彈窗組件的封裝，現在我們想要在瀏覽器窗口內可以對彈窗進行拖拽移動，就需要封裝拖拽事件。

拖拽的原理

首先我們需要了解拖拽的原理，大致分為如下幾個步驟：

將鼠標移動到需要拖拽的物體上，按下鼠標，觸發onmousedown事件；

按住鼠標的同時，選中物體，并進行拖動，觸發onmousemove事件；

放開鼠標，停止拖動，物體會停留在最后的位置，觸發onmouseup事件；

再次按下鼠標，會重復循環以上操作。

注意：onmousedown按下事件只在物體對象范圍內起作用，此處指定對象為窗體loginBox即可;
但窗體的onmousemove、onmouseup事件則需在整個頁面文檔范圍內起作用，應該指定對象為document.

拖拽事件封裝

在base.js中封裝drag()拖拽事件，代碼如下：

Base.prototype.drag = function(){
    for (var i=0;i window.InnerWidth - that.offsetWidth){
                     left = window.InnerWidth - that.offsetWidth;
                 } 
                //窗體距上的偏移量加上窗體自身的高度不超過瀏覽器的高度
                 if(top < 0){
                     top = 0;
                 }else if(top > window.InnerHeight - that.offsetHeight){
                     top = window.InnerHeight - that.offsetHeight;
                 }
                //設置窗體移動后的偏移量
                 that.style.left = left + "px";
                 that.style.top = top + "px"; 
             }
             
             //鼠標放開事件
             document.onmouseup = function(){
                 //清空事件
                 this.onmousemove = null;//這里的this指向document對象
                 this.onmouseup = null;

             } 
        
         };
    }
    return this;
}

前臺調用

window.onload = function () { 
    var loginBox=$().getId("loginBox");//獲取窗體
     //拖拽窗體
     loginBox.drag();
};

GPU云服務器云服務器 js拖拽事件視頻前端js 彈窗 js實現數據拖拽原生js實現拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90981.html

element-ui dialog組件添加可拖拽位置可拖拽寬高

摘要：最近公司新加需求實現彈窗可拖拽還要拖拽寬高變化國際慣例先上圖瀏覽器下作的有幾個點需要注意一下每個彈窗都要有唯一可操作指令可以做到拖拽時要添加可拖拽區塊由于組件在設計時寬度用了百分比這里不同瀏覽器有兼容性問題實現拖拽寬高時獲取邊緣問題定位設最近公司新加需求, 實現彈窗可拖拽, 還要拖拽寬高變化. 國際慣例先上圖: edge瀏覽器下作的gif http://www.lano...

jzman 2021-09-01 14:21 評論0 收藏0
實現element-ui對話框可拖拽功能

摘要：對話框可拖拽及邊界處理應業務需求，需要實現對話框可拖拽問題，應沒有提供官方支持，于是便參考大神的文章，得出了適合業務需要的解決方案。在實現的功能的情況下，封裝成了文件，然后再中引入后可全局使用。 element-ui對話框可拖拽及邊界處理應業務需求，需要實現對話框可拖拽問題，應element-ui沒有提供官方支持，于是便參考大神的文章，得出了適合業務需要的解決方案。很多大神給出的代碼...

qc1iu 2019-08-26 12:13 評論0 收藏0
jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

摘要：隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因為一些特殊的業務需求，經過一個多月的蟄...

anyway 2019-08-01 18:17 評論0 收藏0
jQuery 圖片查看插件 Magnify 開發簡介（仿 Windows 照片查看器）

摘要：隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點，但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言因為一些特殊的業務需求，經過一個多月的蟄...

chaosx110 2019-08-29 14:06 評論0 收藏0