前端基礎進階（十）：面向對象實戰之封裝拖拽對象

https://segmentfault.com/a/1190000012646488??https://yangbo5207.github.io/wutongluo/

說明：此處只是記錄閱讀前端基礎進階的理解和總結，如有需要請閱讀上面的鏈接

1.如何讓元素動起來

要讓元素動起來就要修改元素的top、left 、translate 屬性。因為使用top、left會使頁面重繪，而translate不會，所以從性能上一般優先使用translate。另外因為translate是transform的一個用法，而transform是css3中的所以需要判斷一下瀏覽器是否支持，不同的瀏覽器寫法大概有幾種

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']
  //判斷當前瀏覽器支持哪種transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的瀏覽器大概支持如下幾種transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}

2.獲取元素初始位置

 //獲取目標元素樣式function getStyle(elem, property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//獲取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {console.log(transformValue);var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}

設置元素位置

//設置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}

3.事件

拖拽的原理：mousedown記錄元素和鼠標的初始位置，添加mousemove、mouseup事件，mousemove事件隨著鼠標移動獲取鼠標當前位置。移動后的鼠標位置-鼠標的初始位置=移動后的元素位置-元素的初始位置，如果用diss表示移動后的鼠標位置-鼠標的初始位置，那么元素移動后的位置=元素的初始位置+diss。這樣在鼠標移動時就可以得到元素的位置。mouseup移除mousemove、mouseup事件和做其他處理

    function start(event) {startX = event.pageX; //獲取鼠標初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

?

完整的js代碼

 var oElem = document.getElementById("div1"); //document.getElementById("div1")必須在元素加載完成后才能獲取到元素，所以這個JavaScript必須放在body后，否則返回nullvar startX = 0;var startY = 0;var sourceX = 0;var sourceY = 0;oElem.addEventListener('mousedown', start, false);//獲取目標元素樣式function getStyle(elem, property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];}//判斷當前瀏覽器支持哪種transformfunction getTransform() {var transform = '';var divStyle = document.createElement("div").style;//不同的瀏覽器大概支持如下幾種transformvar transArray = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']for (var x in transArray) {if (transArray[x] in divStyle)return transform = transArray[x];}return transform;}//獲取元素的初始位置function getTargetPos(elem) {var pos = { x: 0, y: 0 };var transform = getTransform();if (transform ) {var transformValue = getStyle(elem,transform);if (transformValue == 'none') {elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (getStyle(elem, 'position') == 'static') {elem.style.position = 'relative';return pos;} else {var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);return pos = {x: x,y: y};}}}//設置元素位置function setTargetPos(elem, pos) {var transform = getTransform();if (transform != "") {elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {elem.style.left = pos.x + "px";elem.style.top = pos.y + "px";}return elem;}function start(event) {startX = event.pageX; //獲取鼠標初始位置startY = event.pageY;var pos = getTargetPos(oElem);sourceX = pos.x;sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - startX;var distanceY = currentY - startY;setTargetPos(oElem, { x: (sourceX + distanceX).toFixed(), y: (sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}

?

我們可以把以上代碼封裝到一個模塊里面，使用的時候只要傳元素Id就可以了。

;(function () {var transform = getTransform();//構造函數function Drag(selector) {this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);this.startX = 0;this.startY = 0;this.sourceX = 0;this.sourceY = 0;this.init();//初始化
        }//原型Drag.prototype = {constructor: Drag,init: function () { this.setDrag(); },//獲取目標元素樣式getStyle: function (property) {//ie 通過currentStyle獲取樣式，其他瀏覽器通過getComputedStyle,getComputedStyle是一個方法return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];},//獲取元素的初始位置getTargetPos: function () {var pos = { x: 0, y: 0 };if (transform != "") {var transformValue = this.getStyle(transform);if (transformValue == 'none') {this.elem.style[transform] = 'translate(0, 0)';return pos;} else {var temp = transformValue.match(/[0-9,\s\.]+/)[0].split(',');return pos = {x: parseInt(temp[4].trim()),y: parseInt(temp[5].trim())};}} else {if (this.getStyle(this.elem, 'position') == 'static') {this.elem.style.position = 'relative';return pos;} else {var x = parseInt(this.getStyle('left') ? this.getStyle('left') : 0);var y = parseInt(this.getStyle('top') ? this.getStyle('top') : 0);return pos = {x: x,y: y};}}},//設置元素位置setTargetPos: function (pos) {if (transform != "") {this.elem.style[transform] = "translate(" + pos.x + "px," + pos.y + "px)";} else {this.elem.style.left = pos.x + "px";this.elem.style.top = pos.y + "px";}},setDrag: function () {var self = this;//因為綁定的方法是獨立執行的，this指向并不是Drag對象，所以必須使用閉包this.elem.addEventListener('mousedown', start, false);function start(event) {self.startX = event.pageX; //獲取鼠標初始位置self.startY = event.pageY;var pos = self.getTargetPos();self.sourceX = pos.x;self.sourceY = pos.y;document.addEventListener('mousemove', move, false);document.addEventListener('mouseup', end, false);}function move(event) {var currentX = event.pageX;var currentY = event.pageY;var distanceX = currentX - self.startX;var distanceY = currentY - self.startY;self.setTargetPos({ x: (self.sourceX + distanceX).toFixed(), y: (self.sourceY + distanceY).toFixed() });}function end(event) {document.removeEventListener('mousemove', move);document.removeEventListener('mouseup', end);}}}// 私有方法，僅僅用來獲取transform的兼容寫法function getTransform() {var transform = '',divStyle = document.createElement('div').style,transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],i = 0,len = transformArr.length;for (; i < len; i++) {if (transformArr[i] in divStyle) {return transform = transformArr[i];}}return transform;}window .Drag=Drag;//對外暴露構造方法
    })();new Drag('div1');//拖拽實例

?

轉載于:https://www.cnblogs.com/lidaying5/p/9100601.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/397860.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/397860.shtml
英文地址，請注明出處：http://en.pswp.cn/news/397860.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

iOS - LocalCache 本地數據緩存

iOS - LocalCache 本地數據緩存

1、自定義方式本地數據緩存 1.1 自定義緩存 1 沙盒路徑下的 Library/Caches 用來存放緩存文件&#xff0c;保存從網絡下載的請求數據&#xff0c;后續仍然需要繼續使用的文件&#xff0c;例如網絡下載的離線數據&#xff0c;圖片&#xff0c;視頻文件等。該目錄中的文件系統不會…
閱讀更多...
如何構建ASP.NET MVC4JQueryAJaxJSon示例

如何構建ASP.NET MVC4JQueryAJaxJSon示例

背景&#xff1a; 博客中將構建一個小示例&#xff0c;用于演示在ASP.NET MVC4項目中&#xff0c;如何使用JQuery Ajax。 直接查看JSon部分 步驟&#xff1a; 1&#xff0c;添加控制器(HomeController)和動作方法(Index),并為Index動作方法添加視圖(Index.cshtml),視圖中HTML如…
閱讀更多...
echarts 有引導線和內部文字_點、線、面構圖的異同以及相互轉化

echarts 有引導線和內部文字_點、線、面構圖的異同以及相互轉化

點、線、面構圖既有相似性&#xff0c;又有差異性。相似的是都有對齊、強調、群組、重復、突出層次的作用&#xff0c;不同的是點的特點是聚焦、線的特點是運動和方向性&#xff0c;面的特性是體量感、穩定性。點的情感最弱&#xff0c;線、面的情感要比點豐富。一、點、線、面…
閱讀更多...
c語言上機報告之水仙花數,C語言上機報告之水仙花數..doc

c語言上機報告之水仙花數,C語言上機報告之水仙花數..doc

C語言上機報告之水仙花數.C語言程序設計上機報告課題名稱&#xff1a;水仙花數的算法院 (系)&#xff1a;工程學院專業班 級&#xff1a; 052126學生姓名&#xff1a; 喻培學 號&#xff1a; 20121004040指導教師&#xff1a; 熊慕舟2013年11月24日C語言上機報告之水仙花數上機…
閱讀更多...
《Python黑帽子：黑客與滲透測試編程之道》 Web攻擊

《Python黑帽子：黑客與滲透測試編程之道》 Web攻擊

Web的套接字函數庫&#xff1a;urllib2 一開始以urllib2.py命名腳本&#xff0c;在Sublime Text中運行會出錯&#xff0c;糾錯后發現是重名了&#xff0c;改過來就好&#xff1a; #!/usr/bin/python #codingutf-8 import urllib2url "http://www.baidu.com"headers …
閱讀更多...
vCenter Converter Standalone使用文檔

vCenter Converter Standalone使用文檔

文檔目的能夠使用vCenter Converter Standalone 將物理機操作系統遷移到虛擬機操作系統基礎知識vCenter Converter Standalone 能將物理機上的操作系統、VMware虛擬機上的操作系統或者Hype-V 上的虛擬機操作系統遷移到VMware上。系統環境操作系統&#xff1a;Windows Server 20…
閱讀更多...
1093芯片做正弦波逆變器_正弦波逆變器中的SPWM調制（鐘任生）

1093芯片做正弦波逆變器_正弦波逆變器中的SPWM調制（鐘任生）

歡迎加入技術交流QQ群(2000人)&#xff1a;電力電子技術與新能源 905723370高可靠新能源行業頂尖自媒體在這里有電力電子、新能源干貨、行業發展趨勢分析、最新產品介紹、眾多技術達人與您分享經驗&#xff0c;歡迎關注我們&#xff0c;搜索微信公眾號&#xff1a;電力電子技術…
閱讀更多...
android 手機短信恢復,安卓手機短信刪除了怎么恢復？簡單恢復的方法

android 手機短信恢復,安卓手機短信刪除了怎么恢復？簡單恢復的方法

原標題&#xff1a;安卓手機短信刪除了怎么恢復&#xff1f;簡單恢復的方法安卓手機短信刪除了怎么恢復&#xff1f;手機短信是生活中不經常使用到&#xff0c;但是依然是十分重要的存在&#xff0c;因為我們現在比較喜歡用社交軟件與別人進行交流&#xff0c;但是在一些相對重…
閱讀更多...
Oracle-查看oracle是否有表被鎖

Oracle-查看oracle是否有表被鎖

問題現象&#xff1a; 查看oracle是否有表被鎖 解決方法&#xff1a; select sid,serial#,program,terminal,username,b.object_id,c.object_name from v$session a, v$locked_object b, dba_objects c where a.sid b.session_id and b.object_id c.object_id;轉載于:http…
閱讀更多...
Python循環的一些基本練習

Python循環的一些基本練習

#1:# name input(請輸入你的身份)# if name egon:# print(--> 超級管理員)# elif name tom:# print(--> 普通管理員)# elif name jack,rain:# print(--> 業務主管)# elif name 其他:# print(--> 普通用戶)#2# today input(今天是星期幾&…
閱讀更多...
bash下個人習慣的一些文件設置

bash下個人習慣的一些文件設置

2019獨角獸企業重金招聘Python工程師標準>>> bash_profile export PATH/usr/local/bin:$PATH export EDITORviinputrc set editing-mode vi #set editing-mode emacs set show-all-if-ambiguous on set completion-ignore-case on set meta-flag on set conver…
閱讀更多...
docker打包鏡像上傳_Jenkins | 一鍵打包部署Spring Boot 應用的Docker鏡像

docker打包鏡像上傳_Jenkins | 一鍵打包部署Spring Boot 應用的Docker鏡像

一、前言1、本文主要內容將在項目中實際使用到的相關東西整理記錄一波&#xff0c;同時可以方便其他同學在使用到的時候參考一下(自己也備忘)&#xff0c;有不對的地方&#xff0c;歡迎指出~~Docker部署SpringBoot 項目通用Dockerfile文件、腳本Jenkins新建任務圖文詳解3、本文…
閱讀更多...
android 發送短信 廣播 demo,向Android模擬器打電話發短信的簡單方法

android 發送短信 廣播 demo,向Android模擬器打電話發短信的簡單方法

在開發android應用程序時&#xff0c;有時候需要測試一下向android手機撥打電話發送短信時該應用程序的反應。譬如編寫一個廣播接收器&#xff0c;來提示用戶有短信收到或者處理短信&#xff0c;就需要向該手機發送短信來進行測試。這里介紹一種簡單的向android模擬器打電話發短…
閱讀更多...
android 隱藏鍵盤時ui延遲恢復,android 軟鍵盤的顯示與隱藏問題的研究

android 隱藏鍵盤時ui延遲恢復,android 軟鍵盤的顯示與隱藏問題的研究

在android中&#xff0c;常常會和輸入法的軟件鍵盤交互。在Manifest文件中&#xff0c;系統給activity的一個屬性-windowSoftInputMode來控制輸入法的顯示方式。該屬性提供了Activity的window與軟鍵盤的window交互的方式。這里的屬性設置有雙方面的影響&#xff1a;1.軟鍵盤的顯…
閱讀更多...
天才基本法_《天才基本法》強推！年度神仙小說，看完這本書我竟然愛上了數學...

天才基本法_《天才基本法》強推！年度神仙小說，看完這本書我竟然愛上了數學...

《天才基本法》——長洱小說文案元寶的書評這個真的是本年度的神仙小說&#xff0c;講述了女主回到少女時代&#xff0c;可以和他一直暗戀的數學天才重來一遍。女主讓男主改變了覺得她碌碌無為的看法&#xff0c;也改變了自己的人生。本書最大的主角其實是數學&#xff01;天知…
閱讀更多...
dataTables插件使用

dataTables插件使用

引用文件 <!-- DataTables CSS --> <link rel"stylesheet" type"text/css" href"http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"><!-- jQuery --> <script type"text/javascript" charset"u…
閱讀更多...
一行代碼，發送郵件

一行代碼，發送郵件

朋友讓我給他媳婦兒肚子里的孩子想個名字 走的越來越快了&#xff0c;有天看到一個論點關于說地域會影響人的一輩子。其實想想的確有這個理兒&#xff0c;這使我想起來每天早上擠地鐵的時候&#xff0c;其中有一個A站的人總是特別彪悍的往里擠&#xff0c;但B站的人就是永遠不會…
閱讀更多...
js call,apply,bind三個方法的區別

js call,apply,bind三個方法的區別

相同點&#xff1a; 都是能夠改變this的指向 不同點&#xff1a; 1.call()&#xff1a;傳參方式跟bind一樣&#xff08;都是以逗號隔開的傳參方式&#xff09;&#xff0c;但是跟apply&#xff08;以數組的形式傳參&#xff09;不一樣&#xff0c; 2.bind(): 此方法應用后的情形…
閱讀更多...
千年鴻蒙 盼爾來兮是什么意思,鴻蒙是什么意思_鴻蒙的意思和出處_我愛歷史網...

千年鴻蒙 盼爾來兮是什么意思,鴻蒙是什么意思_鴻蒙的意思和出處_我愛歷史網...

鴻蒙&#xff0c;是一個漢語詞語&#xff0c;亦作“鴻濛”。中國神話傳說的遠古時代&#xff0c;傳說在盤古開天辟地之前&#xff0c;世界是一團混沌狀&#xff0c;因此把那個時代稱作鴻蒙時代&#xff0c;后來該詞也常被用來泛指遠古時代。引證解釋亦作“鴻濛”。1、宇宙形成前…
閱讀更多...
python中調用萬年歷_python 打印萬年歷

python中調用萬年歷_python 打印萬年歷

題目&#xff1a;打印萬年歷已知條件閏年條件&#xff1a;能被4整除且不能被100整除&#xff0c;或者能被400整除1900年1月1日 是周一解題思路判斷閏年;判斷當月有多少天;這個月的1號是從周幾開始的;格式化打印日歷。解題代碼#判斷年份是否為閏年def is_leap_year(year):if (ye…
閱讀更多...
最新文章

Copyright @ 2022~2023