html5拖動(dòng)元素會(huì)觸發(fā)哪些事件

拖拽發(fā)生過(guò)程

芝罘網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,芝罘網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為芝罘1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的芝罘做網(wǎng)站的公司定做！

被拖拽元素

dragstart 按下鼠標(biāo)鍵并開(kāi)始移動(dòng)鼠標(biāo)時(shí)

drag 在dragstart事件之后，在元素被拖動(dòng)期間會(huì)持續(xù)觸發(fā)該事件

dragend 當(dāng)拖動(dòng)停止時(shí)，會(huì)觸發(fā)dragend事件

放置目標(biāo)元素

dragenter 有元素被拖動(dòng)到放置目標(biāo)上

dragover 緊隨dragenter發(fā)生，在被拖動(dòng)的元素

還在放置目標(biāo)范圍內(nèi)移動(dòng)時(shí)，會(huì)持續(xù)觸發(fā)該事件

dragleave 在元素被拖出放置目標(biāo)時(shí)觸發(fā)

drop 元素被放到了放置目標(biāo)中觸發(fā)

注釋：拖拽發(fā)生過(guò)程：dragstart-drag-dragenter-dragover-dragleave/drop-dragend

怎樣用html5實(shí)現(xiàn)拖拽上傳文件

，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然后獲取本地圖片信息，實(shí)現(xiàn)預(yù)覽，最后上傳。

$(function(){

...接上部分

var box = document.getElementById('drop_area'); //拖拽區(qū)域

box.addEventListener("drop",function(e){

e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果

var fileList = e.dataTransfer.files; //獲取文件對(duì)象

//檢測(cè)是否是拖拽文件到頁(yè)面的操作

if(fileList.length == 0){

return false;

}

//檢測(cè)文件是不是圖片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是圖片！");

return false;

}

//拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能

var img = window.webkitURL.createObjectURL(fileList[0]);

var filename = fileList[0].name; //圖片名稱

var filesize = Math.floor((fileList[0].size)/1024);

if(filesize500){

alert("上傳大小不能超過(guò)500K.");

return false;

}

var str = "img src='"+img+"'p圖片名稱："+filename+"/pp大?。?+filesize+"KB/p";

$("#preview").html(str);

//上傳

xhr = new XMLHttpRequest();

xhr.open("post", "upload.php", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd);

},false);

});

為什么使用html5的拖拽功能，在火狐中總會(huì)彈出一個(gè)新面頁(yè)？

給drop事件加

ev.stopPropagation(); //阻止冒泡

ev.preventDefault(); //阻止默認(rèn)行為

html5 拖動(dòng)效果怎么在手機(jī)上實(shí)現(xiàn)

html5 拖動(dòng)效果在手機(jī)上實(shí)現(xiàn)方法是調(diào)用drag和drop一系列函數(shù)實(shí)現(xiàn)的。

注意：拖拽源在拖拽操作結(jié)束將得到dragend事件對(duì)象，不管操作成功與否。

舉例：

定義可拖放內(nèi)容

div id="columns"

div class="column" draggable="true"headerA/header/div

div class="column" draggable="true"headerB/header/div

div class="column" draggable="true"headerC/header/div

/div

2、監(jiān)聽(tīng)拖動(dòng)事件

可附加大量不同事件以監(jiān)聽(tīng)整個(gè)拖放過(guò)程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.這里是開(kāi)始拖拽

function handleDragStart(e) {

this.style.opacity = '0.4'; ?// this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');

[].forEach.call(cols, function(col) {

col.addEventListener('dragstart', handleDragStart, false);

});

b.dragenter、dragover?和?dragleave?事件處理程序可用于在拖動(dòng)過(guò)程中提供額外的可視化提示。例如，在拖動(dòng)期間將鼠標(biāo)懸停在某一列上方時(shí)，其邊框可能會(huì)變成虛線。這樣，用戶就能知道這些列也是放置的目標(biāo)區(qū)域。