前端如何實現拖拽效果（一）

本文使用的框架是vue3

在日常專案的開發中，會遇到從瀏覽器外拖拽上傳或者拖拽交換位置的需求

首先我們需要開闢一塊需要拖拽上傳的區域

拖拽上傳

dragover(e),

dropimg(e),
loadimg(file,target)
const img = document.createelement("img");
img.style.width = "100%"
img.style.height = "100%"
img.src = e.target.result;
that.hasimg = false
} reader.readasdataurl(file)
}

注：e.preventdefault()是為了阻止瀏覽器的預設行為防止跳轉頁面等行為

dragover

當檔案拖到對應框內時，滑鼠停留執行的事件。

drop

拖拽到對應框內滑鼠鬆開後會執行的事件

通過e.datatransfer.files[0]獲取的資訊，的格式繼承自blob格式，所以可以通過new filereader()解析最終建立img標籤傳入到頁面上

loadimg

渲染方法

通過new filereader()讀取資訊，readasdataurl()方法可以將資訊讀取成乙個url以便於傳入img標籤的src中。

如果需要上傳到後端的話可以用如下方法:

const file = e.datatransfer.files[0];

const formdata = new formdata();
/* 最後將整個formdata作為引數上傳上去即可。
例如：this.$axios.post("/upload", formdata)
*/

前端拖拽效果

適用於一些前端需要拖拽的效果的 目前效果，頁面重新整理消失 注意黃色地方的引數等根據實際情況修改。當時的效果圖，table裡面的tr可以上下拖動改變圖層效果 服務配置拖拽效果 function drag 獲取滑鼠位置 function getmousepos e 獲取元素位置 function ge...

js實現拖拽效果（一） 原理實現

js 拖拽乙個元素的原理 首先要明白三個值 滑鼠的位置a 盒子的位置b 滑鼠在盒子內的距離c 涉及到三個滑鼠事件 然後就可以開始講明實現過程了 html class box div css box box hover js var box document.queryselector box 獲取元...

Flex實現拖拽效果

1.acceptdragdrop 方法 public static function acceptdragdrop target iuicomponent void如果接受拖 放資料，將從 dragenter 事件處理函式呼叫此方法。例如 dragmanager.acceptdragdrop eve...