資訊專欄INFORMATION COLUMN
拖放（Drag and Drop，DnD）操作因為涉及到與底層OS的結(jié)合，所以是較為復雜的交互操作。 這里先實現(xiàn)一個簡單的拖拽圖片到瀏覽器顯示到操作， 主要用到了HTML5中的FileAPI：
先上DEMO
DnD demo
需要注意的是瀏覽器通過取消相應(yīng)的拖拽事件來表明它對該事件有興趣， 比如通過取消dragover來表明瀏覽器已經(jīng)做好準備接受進一步的拖拽，接著說dragend最后到drop，drop事件發(fā)生時，就可以使用HTML5新的文件API也就是FileAPI進行數(shù)據(jù)交互，具體見本栗代碼?
代碼：
HTML
File API可用
鼠標拖拽圖片放入框中
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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78355.html
摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發(fā)多次，比如和?？赏献г?，建議使用，設(shè)定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。 我相信每個人都或多或少接觸過拖放，比如瀏覽...
摘要：簡介在公司初學其中一個要求讓我實現(xiàn)拖拽排序的功能完成之后記錄一下實現(xiàn)方法，采用和來實現(xiàn)這個功能。一環(huán)境搭建首先，使用腳手架創(chuàng)建一個最基本的項目。 簡介 在公司初學react,其中一個要求讓我實現(xiàn)拖拽排序的功能,完成之后記錄一下實現(xiàn)方法，采用antd和reactDND來實現(xiàn)這個功能。 一、環(huán)境搭建 首先，使用 create-react-app 腳手架創(chuàng)建一個最基本的react項目。 np...
閱讀 2696·2021-10-14 09:43
閱讀 3639·2021-10-13 09:39
閱讀 3354·2019-08-30 15:44
閱讀 3207·2019-08-29 16:37
閱讀 3781·2019-08-29 13:17
閱讀 2789·2019-08-26 13:57
閱讀 1895·2019-08-26 11:59
閱讀 1347·2019-08-26 11:46
