資訊專(zhuān)欄INFORMATION COLUMN
拖放（Drag and Drop，DnD）操作因?yàn)樯婕暗脚c底層OS的結(jié)合，所以是較為復(fù)雜的交互操作。 這里先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的拖拽圖片到瀏覽器顯示到操作， 主要用到了HTML5中的FileAPI：
先上DEMO
DnD demo
需要注意的是瀏覽器通過(guò)取消相應(yīng)的拖拽事件來(lái)表明它對(duì)該事件有興趣， 比如通過(guò)取消dragover來(lái)表明瀏覽器已經(jīng)做好準(zhǔn)備接受進(jìn)一步的拖拽，接著說(shuō)dragend最后到drop，drop事件發(fā)生時(shí)，就可以使用HTML5新的文件API也就是FileAPI進(jìn)行數(shù)據(jù)交互，具體見(jiàn)本栗代碼?
代碼：
HTML
File API可用
鼠標(biāo)拖拽圖片放入框中
CSS
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
p {text-align:center;}
JS
var holder = document.getElementById("holder"),
state = document.getElementById("status");
if (typeof window.FileReader === "undefined") {
state.className = "fail";
} else {
state.className = "success";
state.innerHTML = "File API可用";
}
holder.ondragover = function () {
this.className = "hover";
console.log("dragover"); return false;
};
holder.ondragend = function () { this.className = ""; return false; };
holder.ondrop = function (e) {
//console.log(e)
this.className = "";
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
holder.style.background = "url(" + event.target.result + ") no-repeat center";
};
console.log(file);
reader.readAsDataURL(file);
return false;
};
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78355.html
摘要：注意點(diǎn)在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，比如和?？赏献г?，建議使用，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡(jiǎn)單來(lái)說(shuō)，HTML5 提供了 Drag and Drop API，允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素，移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過(guò)程。 我相信每個(gè)人都或多或少接觸過(guò)拖放，比如瀏覽...
摘要：簡(jiǎn)介在公司初學(xué)其中一個(gè)要求讓我實(shí)現(xiàn)拖拽排序的功能完成之后記錄一下實(shí)現(xiàn)方法，采用和來(lái)實(shí)現(xiàn)這個(gè)功能。一環(huán)境搭建首先，使用腳手架創(chuàng)建一個(gè)最基本的項(xiàng)目。 簡(jiǎn)介 在公司初學(xué)react,其中一個(gè)要求讓我實(shí)現(xiàn)拖拽排序的功能,完成之后記錄一下實(shí)現(xiàn)方法，采用antd和reactDND來(lái)實(shí)現(xiàn)這個(gè)功能。 一、環(huán)境搭建 首先，使用 create-react-app 腳手架創(chuàng)建一個(gè)最基本的react項(xiàng)目。 np...
閱讀 2611·2021-10-14 09:43
閱讀 3570·2021-10-13 09:39
閱讀 3304·2019-08-30 15:44
閱讀 3154·2019-08-29 16:37
閱讀 3718·2019-08-29 13:17
閱讀 2742·2019-08-26 13:57
閱讀 1834·2019-08-26 11:59
閱讀 1260·2019-08-26 11:46
