這篇文章主要介紹HTML5中DragEvent接口怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)致力于網(wǎng)站制作、做網(wǎng)站,成都網(wǎng)站設(shè)計,集團網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

DragEvent是一個表示drag和drop交互的DOM event接口。用戶通過將指針設(shè)備（如：鼠標(biāo)）放在目標(biāo)的表面開始拖動，然后拖動指針到一個新的位置（如其他DOM元素）。應(yīng)用程序自動的解析拖放交互。DragEvent接口從mouseEvent和Event那兒繼承屬性。

Event types

DragEvent并不是一個單一的事件，它包含了多個事件，這些事件分別是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。

drag：這個事件在元素拖拽的過程中反復(fù)觸發(fā)，每一百毫秒觸發(fā)一次。這事件的目標(biāo)元素是被拖的那個元素，該事件可冒泡，可取消默認(rèn)行為。

dragstart：這個事件在用戶開始拖動時觸發(fā)。這個事件的目標(biāo)元素是被拖的那個元素，在這些事件中，dragstart事件最先觸發(fā)。該事件可冒泡，可取消默認(rèn)行為。

dragenter：這個事件在被拖的元素進入一個合法的可drop目標(biāo)時觸發(fā)。這個事件的目標(biāo)元素是這個可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。

dragover：當(dāng)被拖的元素在可drop目標(biāo)范圍內(nèi)移動時反復(fù)觸發(fā)這個事件，一百毫秒觸發(fā)一次。這個事件的目標(biāo)元素是這個可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。

dragend：當(dāng)拖拽結(jié)束時觸發(fā)這個事件，這個事件的目標(biāo)元素是被拖的元素。在這些事件中dragend最后觸發(fā)。該事件可冒泡，不能取消默認(rèn)行為。

dragleave：這個事件在被拖得元素離開合法的可drop目標(biāo)時觸發(fā)。這個事件的目標(biāo)元素是這個可drop目標(biāo)。該事件可冒泡，不能取消默認(rèn)行為。

dragexit：當(dāng)一個可drop元素不再是拖拽操作最近的drop目標(biāo)時觸發(fā)這個事件。這個事件的目標(biāo)元素是這個可drop元素。該事件可冒泡，不嫩取消默認(rèn)行為。

drop：當(dāng)在可drop目標(biāo)上松開拖動元素的指針設(shè)備時觸發(fā)這個事件，該事件的目標(biāo)元素是這個可drop目標(biāo)。drop事件在dragend事件觸發(fā)之前觸發(fā)。這個事件可冒泡，可取消默認(rèn)行為。

    
    
    
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    


    
        我可以拖動
    

    
    

    
        document.addEventListener('drag',function(event){
            event.target.style.backgroundColor = 'black';
        },false);
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';

        },false);
        document.addEventListener('dragend',function(event){
            event.target.style.backgroundColor = 'yellow';
        },false);
        document.addEventListener('dragover',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'blue';
        },false);
        document.addEventListener('dragenter',function(event){
            event.target.style.backgroundColor = 'green';
        },false);
        document.addEventListener('dragleave',function(event){
            event.target.style.backgroundColor = 'pink';
        },false);
        document.addEventListener('dragexit',function(event){
            event.target.style.backgroundColor = 'red'
        },false);
        document.addEventListener('drop',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'white';
            console.log(2);


        },false)
    

這些事件的事件對象包含鼠標(biāo)事件的事件對象的方法與屬性。之外還存在一個dataTransfer屬性

讓元素可拖

在HTML中默認(rèn)可拖的元素只有image，link及被選擇的文本。要讓其他元素可拖，需要做下面這三件事：

1.給元素設(shè)置一個draggable屬性，并且將這個屬性的值設(shè)置為true

2.在這個元素上添加一個dragstart的事件監(jiān)聽

3.在dragstart的事件監(jiān)聽上通過event.DataTransfer.setData(type,value)設(shè)置拖拽數(shù)據(jù)。

      This text may be dragged.
    

如果draggable屬性被禁止或者設(shè)置為false，那么這個元素不能被拖拽。draggable屬性可以在任何屬性上設(shè)置。當(dāng)一個元素設(shè)置為可拖，在這個元素上點擊或拖動鼠標(biāo)，這個元素里的文本或其他元素不會被選中。當(dāng)用戶開始拖動，dragstart事件會被觸發(fā)，在dragstart事件中，你能夠通過setData()指定拖拽數(shù)據(jù)，通過setDragImage()指定圖片反饋，以及通過設(shè)置effectAllowed屬性和dropEffect屬性指定拖拽效果。拖拽數(shù)據(jù)是必須指定的，但是圖片反饋是拖拽效果不是必須的

拖拽數(shù)據(jù)

拖拽數(shù)據(jù)包含兩部分信息，分別是數(shù)據(jù)的類型和數(shù)據(jù)的值，數(shù)據(jù)的類型是字符串，數(shù)據(jù)的值也是字符串形式。 拖拽數(shù)據(jù)的類型有：text/plain,text/html,image/jpeg,text/uri-list等，還能夠自定義類型。

可以多次調(diào)用setData()方法設(shè)置多個拖拽數(shù)據(jù)。如下：

var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');

application/x-bookmark是自定義類型。

如果通過這個方法設(shè)置新的類型的數(shù)據(jù)，那么這個新的拖拽數(shù)據(jù)會位于拖拽數(shù)據(jù)列表的尾部，如果設(shè)置以及存在的類型的數(shù)據(jù)，那么新的數(shù)據(jù)會覆蓋舊的數(shù)據(jù)。

通過getData()能夠得到指定類型的拖拽數(shù)據(jù)

通過clearData()能夠清除指定類型的拖拽數(shù)據(jù)

圖片反饋

圖片反饋并不是必須設(shè)置的，默認(rèn)它是從拖拽目標(biāo)上生成的一個半透明圖片，并且這個圖片在拖拽期間會跟著鼠標(biāo)移動。你能夠通過setDragImage(image,xOffect,yOffect)方法自定義圖片反饋。

setDragImage()接受三個參數(shù)，第一個參數(shù)表示圖片引用，第二個和第三個表示圖片左上角相對于鼠標(biāo)指針的位置。單位是像素

    
    
    
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    


    
        我可以拖動
    

    
    

    
      
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';
            event.dataTransfer.setDragImage(document.getElementById('img'),30,30);

        },false);
       
    

拖拽效果

通過設(shè)置effectAllowed和dropEffect可以指定拖拽效果

事件對象的dataTransfer屬性

dataTransfer屬性是一個DataTransfer對象，在這個屬性中保存了拖拽操作過程中的數(shù)據(jù)，它可能保存一個或者多個數(shù)據(jù)項。這個屬性是只讀的。

dataTransfer屬性中的標(biāo)準(zhǔn)屬性

1.dropEffect

得到當(dāng)前drag and drop操作的類型，或者設(shè)置給當(dāng)前drag and drop 設(shè)置新的類型。這個屬性可能取值是none，copy，move，link。這屬性會影響拖拽過程中的鼠標(biāo)的顯示形式。

2.effectAllowed

這個屬性用于指定運行的拖拽操作效果，可選的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默認(rèn)情況這個值是all，如果要設(shè)置這個屬性的值就要在dragstart的事件處理程序里進行設(shè)置。

3.files

包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作沒有涉及文件，那么它是一個空列表。

4.items

是一個包含了所有拖拽數(shù)據(jù)的列表。它是一個DataTransferItemList對象。

5.types

它是一個字符串?dāng)?shù)組，這個數(shù)組中包含在dragstart事件處理程序中設(shè)置的拖拽事件的類型，如果拖拽操作不存在數(shù)據(jù)，那么他得到一個空數(shù)組。

DataTransfer屬性的標(biāo)準(zhǔn)方法

1.clearData(type):移除給定類型相關(guān)的拖拽數(shù)據(jù)。接受一個可選的參數(shù)，如果這個參數(shù)是空或者沒有指定，那么移除所以類型的數(shù)據(jù)，如果指定的類型不存在或者data transfer中不包含數(shù)據(jù)，那么這個方法不會產(chǎn)生什么影響。

2.getData(type):得到指定類型的拖拽數(shù)據(jù)。如果指定類型的數(shù)據(jù)不存在或者data transfer中不包含數(shù)據(jù)， 得到一個空的字符串。

3.setData(type，value):設(shè)置給定類型的拖拽數(shù)據(jù)。接受兩個參數(shù)，第一個參數(shù)是類型，第二個參數(shù)是指定類型的值。 如果這個類型的值不存在，那么在類型列表的最后添加一個新的格式，如果已經(jīng)存在的,那么在相同的位置 存在的數(shù)據(jù)被替換.

4.setDragImage(image，xoffset，yoffset):接受三個參數(shù)，第一個參數(shù)是圖片的引用，第二個和第三個參數(shù)是移動的圖片的 左上角相對鼠標(biāo)的位置。

DataTransferList對象

通過dataTransfer.items得到的值就是DataTransferList對象。

DataTransferList對象的屬性

1.length:得到拖拽數(shù)據(jù)的數(shù)量

DataTransferList對象的方法

1.add()：向拖拽數(shù)據(jù)列表中添加一個新的拖拽數(shù)據(jù)，添加成功后返回這個新的拖拽數(shù)據(jù)。當(dāng)添加一個文件到拖拽數(shù)據(jù)列表中，這個方法只接受一個文件對象作為參數(shù)。當(dāng)添加一個給定 類型的字符串到拖拽數(shù)據(jù)列表中，這個方法接受兩個參數(shù)，第一個參數(shù)是數(shù)據(jù)，第二個參數(shù)是類型。

2.remove(index):從拖拽數(shù)據(jù)列表中移除指定位置的拖拽數(shù)據(jù)。這個方法接受一個表示位置的參數(shù)，如果這個參數(shù)小于0或者大于拖拽數(shù)據(jù)列表的長度，拖拽數(shù)據(jù)列表不會發(fā)生改變。

3.clear():移除拖拽數(shù)據(jù)列表中所有的拖拽數(shù)據(jù)。不需要參數(shù)。

4.DataTransferItem(index):得到指定位置上的拖拽數(shù)據(jù)。接受一個表示位置的參數(shù)， 這個方法簡寫形式是數(shù)組索引。

DataTransferItem對象

dataTransfer.items中的每一項都是DataTransferItem對象。

DataTransferItem對象的屬性

1.kind：得到拖拽數(shù)據(jù)的鍵，可能的值有file和string

2.type：得到拖拽數(shù)據(jù)的類型，是MINE type

DataTransferItem對象的方法

1.getAsFile():返回拖拽數(shù)據(jù)的文件對象。如果拖拽數(shù)據(jù)不是文件則返回null

2.getAsString(function):調(diào)用回調(diào)函數(shù)，這個回調(diào)函數(shù)將拖拽數(shù)據(jù)項的字符串形式作為它的參數(shù)

拖拽文件

要使文件能夠被拖放的一個重要步驟是定義一個放置區(qū)域。并且為放置區(qū)域添加drop，dragover和dragend事件處理程序。

當(dāng)為一個元素添加drop事件的處理程序，及在dragover事件處理程序中取消瀏覽器的默認(rèn)行為，那么這個元素就是放置區(qū)域。

另外，在drag和drop操作結(jié)束之后，應(yīng)用程序應(yīng)該移除拖拽數(shù)據(jù)（可能是一個或者多個文件），數(shù)據(jù)的清理通常在 dragend事件處理程序中。

例子一，訪問文件名

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren't files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }
  }
}

例子二，阻止瀏覽器默認(rèn)行為

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

例子三，清除數(shù)據(jù)

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

以上是“HTML5中DragEvent接口怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！