這篇文章主要介紹HTML5中DragEvent接口怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
員工經(jīng)過長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。
創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供
成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、電商網(wǎng)站開發(fā)，
成都小程序開發(fā)，軟件按需規(guī)劃網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
DragEvent是一個(gè)表示drag和drop交互的DOM event接口。用戶通過將指針設(shè)備（如：鼠標(biāo)）放在目標(biāo)的表面開始拖動(dòng)，然后拖動(dòng)指針到一個(gè)新的位置（如其他DOM元素）。應(yīng)用程序自動(dòng)的解析拖放交互。DragEvent接口從mouseEvent和Event那兒繼承屬性。
Event types
DragEvent并不是一個(gè)單一的事件，它包含了多個(gè)事件，這些事件分別是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。
drag：這個(gè)事件在元素拖拽的過程中反復(fù)觸發(fā)，每一百毫秒觸發(fā)一次。這事件的目標(biāo)元素是被拖的那個(gè)元素，該事件可冒泡，可取消默認(rèn)行為。
dragstart：這個(gè)事件在用戶開始拖動(dòng)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是被拖的那個(gè)元素，在這些事件中，dragstart事件最先觸發(fā)。該事件可冒泡，可取消默認(rèn)行為。
dragenter：這個(gè)事件在被拖的元素進(jìn)入一個(gè)合法的可drop目標(biāo)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。
dragover：當(dāng)被拖的元素在可drop目標(biāo)范圍內(nèi)移動(dòng)時(shí)反復(fù)觸發(fā)這個(gè)事件，一百毫秒觸發(fā)一次。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，可取消默認(rèn)行為。
dragend：當(dāng)拖拽結(jié)束時(shí)觸發(fā)這個(gè)事件，這個(gè)事件的目標(biāo)元素是被拖的元素。在這些事件中dragend最后觸發(fā)。該事件可冒泡，不能取消默認(rèn)行為。
dragleave：這個(gè)事件在被拖得元素離開合法的可drop目標(biāo)時(shí)觸發(fā)。這個(gè)事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。該事件可冒泡，不能取消默認(rèn)行為。
dragexit：當(dāng)一個(gè)可drop元素不再是拖拽操作最近的drop目標(biāo)時(shí)觸發(fā)這個(gè)事件。這個(gè)事件的目標(biāo)元素是這個(gè)可drop元素。該事件可冒泡，不嫩取消默認(rèn)行為。
drop：當(dāng)在可drop目標(biāo)上松開拖動(dòng)元素的指針設(shè)備時(shí)觸發(fā)這個(gè)事件，該事件的目標(biāo)元素是這個(gè)可drop目標(biāo)。drop事件在dragend事件觸發(fā)之前觸發(fā)。這個(gè)事件可冒泡，可取消默認(rèn)行為。
test target
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
我可以拖動(dòng)
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)
重慶分公司
重慶分公司