如何實現拖拽？
1、為要實現拖拽的元素新增屬性 draggable="ture"
<div class="dragbox"
draggable
="ture"
>
div>
2、js拖拽相關事件
被拖拽元素事件：拖拽進入的目標元素的事件：
//被拖拽元素-拖拽開始時的觸發
const dragbox = document.queryselector('.dragbox');
dragbox.ondragstart = function
()
//目標元素-滑鼠進入時觸發
innerbox.addeventlistener('dragenter',function
());
在進行嘗試的過程中，ondrop事件出現了失靈的狀況，最後發現是因為有預設事件，需對預設事件進行阻止：
//拖拽覆蓋時
innerbox.addeventlisterner('dragover',function
(e));
//拖拽滑鼠釋放時
innerbox.addeventlisterner('drop',function
(e));
3、火狐瀏覽器的相容問題
在火狐瀏覽器無法進行拖拽操作，需採取一些措施達到相容的效果：為正在拖動的元素設定資料，使目標元素可以獲取到
//只需在拖拽開始的事件裡加入如下**，即可達到相容效果
dragbox.ondragstart = function
(e)
goudan 只是個名字，可以任取
如果想在拖拽結束時取出資料：
innerbox.addeventlistener('drop', function
(e))
4、file讀取顯示 filereader
如果想要實現拖拽到網頁中的功能，如上傳功能
dragbox.ondrop = function(e);
}
4、blob讀取顯示
blob將拖進來的轉換為2進製原始資料
dragbox.ondrop = function(e)
}
關於blob物件：
html5拖拽 初探
先看看效果 完整測試 html5 拖拽 box 接下來對 進行一一講解 drag的英譯是 拖 拽 drop的意思是 放下 drag和drop 是html5中新增的特性，任何元素都能夠拖放 大部分主流瀏覽器目前也夠支援html5的拖放功能。1.我們想要拖動那個元素，首先要把這個元素設定成可拖拽，將該元...
vue利用html5拖放實現拖拽
html 拖放 drag and drop 介面使應用程式能夠在瀏覽器中使用拖放功能。一 拖拽事件 1 drag 當拖動元素或選中的文字時觸發。2 dragend 當拖拽操作結束時觸發 3 dragenter 當拖動元素或選中的文字到乙個可釋放目標時觸發 4 dragexit 當元素變得不再是拖動操...
HTML5 拖拽複製功能的實現
拖拽是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖拽是標準的一部分，任何元素都能夠拖拽。html5拖拽非常常見的乙個功能，但是大部分拖拽的案例都是乙個剪下的過程，專案中需要實現html5拖拽複製的功能，html5拖拽複製很簡單，只需要在普通html5拖拽的過程中做一點小小的改...