摘要:準(zhǔn)備工作首先來一個可編輯的和一些簡單的樣式來封裝兩個方法獲取到操作的文件文件轉(zhuǎn)為拋出開始拖拽文件要使用到的三個相關(guān)事件,分別是,,當(dāng)元素或者選擇的文本被拖拽到一個有效的放置目標(biāo)上時,觸發(fā)事件。
準(zhǔn)備工作 首先來一個可編輯的div和一些簡單的樣式
來封裝兩個方法
function init({el, callback}){ // 獲取到操作的文件 } function fileToBase64(file, callback){ // 文件轉(zhuǎn)為base64拋出 } window.init = init;開始 拖拽文件
要使用到的三個相關(guān)事件, 分別是: dragover, drop, dragleave
當(dāng)元素或者選擇的文本被拖拽到一個有效的放置目標(biāo)上時,觸發(fā) dragover 事件。
當(dāng)一個元素或是選中的文字被拖拽釋放到一個有效的釋放目標(biāo)位置時,觸發(fā)drop事件
被拖動的元素或文本選區(qū)移出有效釋放目標(biāo)區(qū) drop 元素在有效釋放目標(biāo)區(qū)上釋放, 觸發(fā)dragleave事件
我們可以在dragover和dragleave來處理拖動當(dāng)當(dāng)前位置和拖動完成后或離開的樣式。在drop事件回調(diào)來處理要上傳的文件
function init({el, callback}){ const upBox = document.querySelector(el); if(!upBox){return}; // 拖拽 upBox.addEventListener("dragover", dragoverFile) upBox.addEventListener("drop", dropFile) upBox.addEventListener("dragleave", dragleaveFile) function dragoverFile(e) { e.preventDefault(); } function dragleaveFile(e) { } function dropFile(e) { e.preventDefault(); let fileList = e.dataTransfer.files; let file = fileList[0]; // 在這里就可以拿到拖拽的文件了,傳到下一個函數(shù)進(jìn)行處理 fileToBase64(file, callback) } }粘貼
粘貼的話用到的事件就是 paste 了
function init({el, callback}){ const upBox = document.querySelector(el); if(!upBox){return}; // 拖拽 upBox.addEventListener("dragover", dragoverFile) upBox.addEventListener("drop", dropFile) upBox.addEventListener("dragleave", dragleaveFile) function dragoverFile(e) { e.preventDefault(); } function dragleaveFile(e) { } function dropFile(e) { e.preventDefault(); let fileList = e.dataTransfer.files; let file = fileList[0]; // 在這里就可以拿到拖拽的文件了,傳到下一個函數(shù)進(jìn)行處理 fileToBase64(file, callback) } // 粘貼 upBox.addEventListener("paste", pasteFile) function pasteFile(e) { e.preventDefault(); const items = e.clipboardData.items; for( let i=0; i 這里并不能粘貼文件最后把文件轉(zhuǎn)成base64function fileToBase64(file, callback){ // 實(shí)例化一個FileReader對象, 當(dāng)讀取完成文件時,把base64拋出 const reader = new FileReader(); reader.onload = function(e){ callback(e.target.result) } reader.readAsDataURL(file); }最后寫的比較簡單,只是列出了大概思路,實(shí)際業(yè)務(wù)呢,還是要擴(kuò)展好多的。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/97532.html
摘要:使用場景圖片的拖拽指定區(qū)域進(jìn)行上傳圖片粘貼進(jìn)行上傳功能核心參考案例代碼定義模塊截圖粘貼如果是圖片讀取完成后,上傳上傳圖片返回一個數(shù)據(jù)拖拽上傳回調(diào)文件返回一個數(shù)據(jù)解析粘貼過來的內(nèi)容,看是否有不是本站的圖片解析出來上傳到本站使用方法粘貼上傳圖 使用場景 圖片的拖拽指定區(qū)域進(jìn)行上傳 圖片粘貼進(jìn)行上傳功能 核心api參考 File clipboardData 案例代碼 Seajs 定義To...
前言:前段時間負(fù)責(zé)公司的運(yùn)營管理后臺項(xiàng)目,通過運(yùn)營后臺的PC端拖拽配置布局,達(dá)到App首頁模板的動態(tài)UI界面配置,生成頁面。趁著周末,整理一下當(dāng)時所了解到的拖拽。文章會根據(jù)大家的反饋或者自己學(xué)習(xí)經(jīng)驗(yàn)的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā),歡迎點(diǎn)贊關(guān)注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到這段話: UI 開發(fā)的三種模式 1.手寫標(biāo)簽和樣式代碼,生成頁面 2.可視化拖拽 ...
摘要:記錄下,開發(fā)需求是實(shí)現(xiàn)一個類似百度網(wǎng)盤全局拖拽的功能兼容瀏覽器,以上。監(jiān)聽上的事件,顯示拖拽的蒙層監(jiān)聽目標(biāo)節(jié)點(diǎn)上的拖拽事件。 記錄下,開發(fā)需求是實(shí)現(xiàn)一個類似百度網(wǎng)盤全局拖拽的功能,兼容瀏覽器,IE0以上。實(shí)現(xiàn)思路是,采用原聲的拖拽事件。監(jiān)聽window上的dragenter事件,拖拽目標(biāo)節(jié)點(diǎn)是fixed罩住頁面的dropZone節(jié)點(diǎn)。 監(jiān)聽window上的dragenter事件,顯示...
摘要:最近在實(shí)現(xiàn)一個功能,需求如下前提當(dāng)前頁面無彈窗頁面任意位置執(zhí)行粘貼讀取剪切板中的截屏數(shù)據(jù)上傳截圖首先還是從網(wǎng)上找相關(guān)的例子。找到了上的專欄文章獲取剪切板內(nèi)容,控制圖片粘貼。 最近在實(shí)現(xiàn)一個功能,需求如下: 前提:當(dāng)前頁面無彈窗 頁面任意位置執(zhí)行粘貼 讀取剪切板中的截屏數(shù)據(jù) 上傳截圖 首先還是從網(wǎng)上找相關(guān)的例子。 找到了SF上的專欄文章《js獲取剪切板內(nèi)容,js控制圖片粘貼》。 于是...
閱讀 544·2023-04-26 01:39
閱讀 4523·2021-11-16 11:45
閱讀 2623·2021-09-27 13:37
閱讀 898·2021-09-01 10:50
閱讀 3610·2021-08-16 10:50
閱讀 2231·2019-08-30 15:55
閱讀 2995·2019-08-30 15:55
閱讀 2265·2019-08-30 14:07