資訊專欄INFORMATION COLUMN
摘要：記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能兼容瀏覽器，以上。監聽上的事件，顯示拖拽的蒙層監聽目標節點上的拖拽事件。
記錄下，開發需求是實現一個類似百度網盤全局拖拽的功能,兼容瀏覽器，IE0以上。實現思路是，采用原聲的拖拽事件。監聽window上的dragenter事件，拖拽目標節點是fixed罩住頁面的dropZone節點。
監聽window上的dragenter事件，顯示拖拽的蒙層
監聽目標節點dropzone上的拖拽（dragover, dragenter, dragleave, drop）事件。由于dragZone是fixed 到整個頁面的，所以在頁面全局拖拽時，都會顯示蒙層。
drop時，拖拽結束，拿到拖拽的文件
可全局拖拽blablabla的文案
demo跑起來會發現，當拖拽到dragZone的子節點，顯示的文字上時，拖拽會失效。按理說，事件應該冒泡到父節點并且能正常拖動才對，但是 現實總是這么骨感
搜了很久，搜到一個屬性，可完美的解決問題。在文案節點上添加css屬性pointer-events:none；MDN上的解釋如下：
除了指示該元素不是鼠標事件的目標之外，值none表示鼠標事件“穿透”該元素并且指定該元素“下面”的任何東西。
意思就是，加了這個屬性之后，不會觸發dom事件，就像一個幽靈，鼠標點擊，拖動等等，都是穿透這個元素的。當時看到這個屬性，emmmm覺得有文化的人耍起流氓，真的是..一言難盡吧
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107374.html
摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點自動化，模塊化性能優化自動化就是命令行操作，一行命令實現多個功能，例如自動監聽變化，自動翻譯源代碼到打包代碼庫里面文件復雜多樣文件多變化快將各種文件集 webpack的使用 為什么使用webpack 1.前端需要工程化 工程化的概念： 小作坊 -> 流水線流水線的特點：自動化，模塊化、性能優化 自動化就是命令行操作，一行...
摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
摘要：案例說明使用原生完成桌面操作級應用，對于原生的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件相關的功能入手，給大家帶來詳細的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說明：使用原生 JS 完成桌面操作級應用，對于原生 JS 的掌握情況而言，是一個較為全面的綜合型案例。本次課從事件（event）相關的功能入手，給大家...
摘要：本篇文章就來分享一下兩款開箱即用上手容易的圖床相冊程序和在線文件管理器目錄列表程序，由好友開發并維護，非常適合個人站長用作圖床相冊和文件下載分享。雖然說現在照片還有文件存儲等都可以上傳到網盤中，但是國內的網盤與國外的網盤存儲還有點不一樣。以百度網盤與Dropbox對比為例，百度網盤頂多算是一個個人用來存放私人照片和文件的網絡硬盤，如果用來分享的話很容易被百度限制或者取消下載。很多的個人站長為...
閱讀 1561·2021-11-24 09:39
閱讀 1042·2021-11-22 15:11
閱讀 2167·2021-11-19 11:35
閱讀 1627·2021-09-13 10:37
閱讀 2453·2021-09-03 10:47
閱讀 2134·2021-08-30 09:47
閱讀 1626·2021-08-20 09:39
閱讀 2901·2019-08-30 14:13
