資訊專欄INFORMATION COLUMN
摘要：在實(shí)現(xiàn)博客前端頁(yè)面四中已經(jīng)實(shí)現(xiàn)了對(duì)彈窗組件的封裝，現(xiàn)在我們想要在瀏覽器窗口內(nèi)可以對(duì)彈窗進(jìn)行拖拽移動(dòng)，就需要封裝拖拽事件。
在JS實(shí)現(xiàn)博客前端頁(yè)面（四）中已經(jīng)實(shí)現(xiàn)了對(duì)彈窗組件的封裝，現(xiàn)在我們想要在瀏覽器窗口內(nèi)可以對(duì)彈窗進(jìn)行拖拽移動(dòng)，就需要封裝拖拽事件。
拖拽的原理首先我們需要了解拖拽的原理，大致分為如下幾個(gè)步驟：
將鼠標(biāo)移動(dòng)到需要拖拽的物體上，按下鼠標(biāo)，觸發(fā)onmousedown事件；
按住鼠標(biāo)的同時(shí)，選中物體，并進(jìn)行拖動(dòng)，觸發(fā)onmousemove事件；
放開(kāi)鼠標(biāo)，停止拖動(dòng)，物體會(huì)停留在最后的位置，觸發(fā)onmouseup事件；
再次按下鼠標(biāo)，會(huì)重復(fù)循環(huán)以上操作。
注意：onmousedown按下事件只在物體對(duì)象范圍內(nèi)起作用，此處指定對(duì)象為窗體loginBox即可;
但窗體的onmousemove、onmouseup事件則需在整個(gè)頁(yè)面文檔范圍內(nèi)起作用，應(yīng)該指定對(duì)象為document.
在base.js中封裝drag()拖拽事件，代碼如下：
Base.prototype.drag = function(){
for (var i=0;i window.InnerWidth - that.offsetWidth){
left = window.InnerWidth - that.offsetWidth;
}
//窗體距上的偏移量加上窗體自身的高度不超過(guò)瀏覽器的高度
if(top < 0){
top = 0;
}else if(top > window.InnerHeight - that.offsetHeight){
top = window.InnerHeight - that.offsetHeight;
}
//設(shè)置窗體移動(dòng)后的偏移量
that.style.left = left + "px";
that.style.top = top + "px";
}
//鼠標(biāo)放開(kāi)事件
document.onmouseup = function(){
//清空事件
this.onmousemove = null;//這里的this指向document對(duì)象
this.onmouseup = null;
}
};
}
return this;
}
前臺(tái)調(diào)用
window.onload = function () {
var loginBox=$().getId("loginBox");//獲取窗體
//拖拽窗體
loginBox.drag();
};
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90981.html
摘要：最近公司新加需求實(shí)現(xiàn)彈窗可拖拽還要拖拽寬高變化國(guó)際慣例先上圖瀏覽器下作的有幾個(gè)點(diǎn)需要注意一下每個(gè)彈窗都要有唯一可操作指令可以做到拖拽時(shí)要添加可拖拽區(qū)塊由于組件在設(shè)計(jì)時(shí)寬度用了百分比這里不同瀏覽器有兼容性問(wèn)題實(shí)現(xiàn)拖拽寬高時(shí)獲取邊緣問(wèn)題定位設(shè) 最近公司新加需求, 實(shí)現(xiàn)彈窗可拖拽, 還要拖拽寬高變化. 國(guó)際慣例先上圖: edge瀏覽器下作的gif http://www.lano...
摘要：對(duì)話框可拖拽及邊界處理應(yīng)業(yè)務(wù)需求，需要實(shí)現(xiàn)對(duì)話框可拖拽問(wèn)題，應(yīng)沒(méi)有提供官方支持，于是便參考大神的文章，得出了適合業(yè)務(wù)需要的解決方案。在實(shí)現(xiàn)的功能的情況下，封裝成了文件，然后再中引入后可全局使用。 element-ui對(duì)話框可拖拽及邊界處理 應(yīng)業(yè)務(wù)需求，需要實(shí)現(xiàn)對(duì)話框可拖拽問(wèn)題，應(yīng)element-ui沒(méi)有提供官方支持，于是便參考大神的文章，得出了適合業(yè)務(wù)需要的解決方案。很多大神給出的代碼...
摘要：隨后會(huì)陸續(xù)發(fā)布及相關(guān)版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點(diǎn)，但不影響整體的使用。鍵盤(pán)控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因?yàn)橐恍┨厥獾臉I(yè)務(wù)需求，經(jīng)過(guò)一個(gè)多月的蟄...
摘要：隨后會(huì)陸續(xù)發(fā)布及相關(guān)版本的插件。這和圖片查看器的操作方式是相同的。目前的調(diào)整大小存在一點(diǎn)，但不影響整體的使用。鍵盤(pán)控制和照片查看器的按鍵是一樣的。除了照片查看器，的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因?yàn)橐恍┨厥獾臉I(yè)務(wù)需求，經(jīng)過(guò)一個(gè)多月的蟄...
閱讀 1636·2021-11-24 09:39
閱讀 3778·2021-11-24 09:39
閱讀 2000·2021-11-16 11:54
閱讀 1556·2021-09-30 09:47
閱讀 1838·2021-09-26 10:16
閱讀 2418·2021-09-22 15:33
閱讀 1557·2021-09-14 18:01
閱讀 2604·2021-09-07 09:59
