1.概念

拖拽操作在HTML5 是作為標準的一部分。能夠使用HTML5所支援的事件和屬性來實現拖拽操作

2.拖拽相關事件及屬性

• dragstart：是個事件。該事件在剛開始拖拽時在拖拽元素上觸發。一般會用來設定資料。

• dragover：是在拖拽時不斷觸發的事件，一般會給放置元素設定取消預設的不可放置行為。即表示某個元素可以放置在另一個元素之前或之後。

• drop：是放置事件。放置元素進行觸發。一般我們會在事件裡獲取dragstart事件裡設定的資料，並進行拖拽的dom處理。

• draggable：HTML標籤屬性。設定某個HTML標籤是否可拖拽，預設是不可拖拽的-false，布林型。

• dataTransfer：是拖拽相關事件的event物件才有的一個物件屬性。可以利用它來實現拖拽的資料傳輸。一般我們會將拖拽元素的id或class儲存到dataTransfer中，在drop事件中獲取該資料並進行處理

  • setData(‘屬性名’,'屬性值'):以鍵值對方式儲存某個資料

  • getData(‘屬性名’):獲取某個資料

3.拖拽一般流程

1.給需要拖拽 的標籤設定draggable=true

<img src="./images/img16.jpg" draggable="true" id="pic" width="200px">

2.給拖拽的標籤設定ondragstart

//獲取元素
var picEle=document.querySelector("#pic");
//2.給要拖拽的元素設定ondragstart事件
picEle.ondragstart=function(e){
     var ev=e||window.event;
     ev.dataTransfer.setData('text',ev.target.id);
}

3.給放置元素設定dragover事件，事件裡取消預設行為，保證該標籤可以放置拖拽元素

//獲取box元素
var boxEle=document.querySelector(".box");
boxEle.ondragover
 
=function(e){
   var ev=e||window.event;
   ev.preventDefault();
}

4.給放置元素設定ondrop事件，事件裡利用dataTransfer來獲取所儲存的資料，並進行業務處理。

boxEle.ondrop=function(e){
    var ev=e||window.event;
    var data=ev.dataTransfer.getData('text');
    e.target.appendChild(document.querySelector("#"+data));
}