拖放（drag和drop）是html5標(biāo)準(zhǔn)組成，下面我們從五個(gè)方面對(duì)其進(jìn)行敘述，分別是如何成為拖動(dòng)物體，如何成為拖動(dòng)目標(biāo)，拖動(dòng)物體上擁有的事件，拖動(dòng)目標(biāo)上擁有的事件以及拖放物體間如何傳遞信息。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、禹城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為禹城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

拖動(dòng)物體上擁有的事件

• dragstart （在物體剛被拖動(dòng)時(shí)觸發(fā)）
• drag （在dragstart事件觸發(fā)之后就被觸發(fā)）
• dragend （拖動(dòng)事件結(jié)束時(shí)觸發(fā)）
  

拖動(dòng)目標(biāo)上擁有的事件

• dragenter （當(dāng)拖拽元素進(jìn)入放置目標(biāo)時(shí)觸發(fā)）
• dragover （當(dāng)拖拽元素在放置目標(biāo)中移動(dòng)時(shí)觸發(fā)，類似于mouseover）
• drop （當(dāng)拖拽元素放置在放置目標(biāo)中時(shí)觸發(fā)）
  

如何成為拖動(dòng)物體

在html中img元素默認(rèn)可以進(jìn)行拖拽，其它元素需要設(shè)置draggable=true，即可對(duì)其進(jìn)行拖拽。

如何成為拖動(dòng)目標(biāo)

html中，元素默認(rèn)不能成為放置目標(biāo)，只有我們禁止了drapenter和drapover事件的默認(rèn)行為時(shí)，可以稱為拖放目標(biāo)。

droptarget.addEventListener('dragenter', function(event) {
  event.preventDefault();
});
droptarget.addEventListener('dragover', function(event) {
  event.preventDefault();
});

拖放物體間如何傳遞信息

事件中具有一個(gè)dataTransfer對(duì)象，它擁有的兩個(gè)常用方法setData()和getData()，分別用于在存放拖拽信息以及獲取拖拽信息。其中，setData()只能在拖拽事件剛開始時(shí)設(shè)置，即dragstart事件時(shí)設(shè)置，getData()則一般在放置獲取，即drop事件觸發(fā)時(shí)獲取。

// drapobj 拖拽元素
// droptarget 放置目標(biāo)
dragobj.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('id', dragobj.id);
});
droptarget.addEventListener('drop', function(event) {
  var id = event.dataTransfer.getData('id');
  var obj = document.getElementById(id);
  event.preventDefault();
  this.appendChild(obj);
}); 

完整代碼

存在問題

火狐瀏覽器中拖拽圖片默認(rèn)打開新窗口，根據(jù)javascript高級(jí)程序設(shè)計(jì)中在drop事件中禁止默認(rèn)事件，未解決問題。

解決方法：將圖片作為div的背景圖片，將div作為拖拽物體，則不存在此問題。

最終代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。