国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

全局拖拽上傳文件（類似百度網(wǎng)盤）的實(shí)現(xiàn)及踩坑

shiguibiao / 704人閱讀

摘要：記錄下，開(kāi)發(fā)需求是實(shí)現(xiàn)一個(gè)類似百度網(wǎng)盤全局拖拽的功能兼容瀏覽器，以上。監(jiān)聽(tīng)上的事件，顯示拖拽的蒙層監(jiān)聽(tīng)目標(biāo)節(jié)點(diǎn)上的拖拽事件。

記錄下，開(kāi)發(fā)需求是實(shí)現(xiàn)一個(gè)類似百度網(wǎng)盤全局拖拽的功能,兼容瀏覽器，IE0以上。實(shí)現(xiàn)思路是，采用原聲的拖拽事件。監(jiān)聽(tīng)window上的dragenter事件，拖拽目標(biāo)節(jié)點(diǎn)是fixed罩住頁(yè)面的dropZone節(jié)點(diǎn)。

監(jiān)聽(tīng)window上的dragenter事件，顯示拖拽的蒙層

監(jiān)聽(tīng)目標(biāo)節(jié)點(diǎn)dropzone上的拖拽（dragover, dragenter, dragleave, drop）事件。由于dragZone是fixed 到整個(gè)頁(yè)面的，所以在頁(yè)面全局拖拽時(shí)，都會(huì)顯示蒙層。

drop時(shí)，拖拽結(jié)束，拿到拖拽的文件


    
        
        

          
可全局拖拽blablabla的文案

demo跑起來(lái)會(huì)發(fā)現(xiàn)，當(dāng)拖拽到dragZone的子節(jié)點(diǎn)，顯示的文字上時(shí)，拖拽會(huì)失效。按理說(shuō)，事件應(yīng)該冒泡到父節(jié)點(diǎn)并且能正常拖動(dòng)才對(duì)，但是 現(xiàn)實(shí)總是這么骨感

搜了很久，搜到一個(gè)屬性，可完美的解決問(wèn)題。在文案節(jié)點(diǎn)上添加css屬性pointer-events:none；MDN上的解釋如下：

除了指示該元素不是鼠標(biāo)事件的目標(biāo)之外，值none表示鼠標(biāo)事件“穿透”該元素并且指定該元素“下面”的任何東西。

意思就是，加了這個(gè)屬性之后，不會(huì)觸發(fā)dom事件，就像一個(gè)幽靈，鼠標(biāo)點(diǎn)擊，拖動(dòng)等等，都是穿透這個(gè)元素的。當(dāng)時(shí)看到這個(gè)屬性，emmmm覺(jué)得有文化的人耍起流氓，真的是..一言難盡吧

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107374.html

相關(guān)文章

  • webpack入門及踩坑應(yīng)對(duì)指南

    摘要：的使用為什么使用前端需要工程化工程化的概念小作坊流水線流水線的特點(diǎn)自動(dòng)化，模塊化性能優(yōu)化自動(dòng)化就是命令行操作，一行命令實(shí)現(xiàn)多個(gè)功能，例如自動(dòng)監(jiān)聽(tīng)變化，自動(dòng)翻譯源代碼到打包代碼庫(kù)里面文件復(fù)雜多樣文件多變化快將各種文件集 webpack的使用 為什么使用webpack 1.前端需要工程化 工程化的概念： 小作坊 -> 流水線流水線的特點(diǎn)：自動(dòng)化，模塊化、性能優(yōu)化 自動(dòng)化就是命令行操作，一行...

    ky0ncheng 評(píng)論0 收藏0

  • vue-cli3.x 新特性及踩坑記

    摘要：前言都到了，所以是時(shí)候玩轉(zhuǎn)一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導(dǎo)致正確的不能用。打開(kāi)終端，切換到根路徑文件里面修改為方法二是默認(rèn)路徑修改了路徑會(huì)出現(xiàn)錯(cuò)誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

    xiaoqibTn 評(píng)論0 收藏0

  • 百度網(wǎng)盤文件夾框選功能

    摘要：案例說(shuō)明使用原生完成桌面操作級(jí)應(yīng)用，對(duì)于原生的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件相關(guān)的功能入手，給大家?guī)?lái)詳細(xì)的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例說(shuō)明：使用原生 JS 完成桌面操作級(jí)應(yīng)用，對(duì)于原生 JS 的掌握情況而言，是一個(gè)較為全面的綜合型案例。本次課從事件（event）相關(guān)的功能入手，給大家...

    jkyin 評(píng)論0 收藏0

  • 開(kāi)箱即用-簡(jiǎn)潔實(shí)用的ImgURL圖床相冊(cè)程序和Zdir目錄列表程序(文件管理器）

    摘要：本篇文章就來(lái)分享一下兩款開(kāi)箱即用上手容易的圖床相冊(cè)程序和在線文件管理器目錄列表程序，由好友開(kāi)發(fā)并維護(hù)，非常適合個(gè)人站長(zhǎng)用作圖床相冊(cè)和文件下載分享。雖然說(shuō)現(xiàn)在照片還有文件存儲(chǔ)等都可以上傳到網(wǎng)盤中，但是國(guó)內(nèi)的網(wǎng)盤與國(guó)外的網(wǎng)盤存儲(chǔ)還有點(diǎn)不一樣。以百度網(wǎng)盤與Dropbox對(duì)比為例，百度網(wǎng)盤頂多算是一個(gè)個(gè)人用來(lái)存放私人照片和文件的網(wǎng)絡(luò)硬盤，如果用來(lái)分享的話很容易被百度限制或者取消下載。很多的個(gè)人站長(zhǎng)為...

    番茄西紅柿 評(píng)論0 收藏2637

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<