HTML拖拽

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事件，事件里利用dataTransfer保存拖拽元素的class或id

//獲取元素
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));
}