網路應用程式對於資料收集/攝取很有用。如果收集和儲存資料的機制易於使用，則可以累積大量有用的資料進行資料處理。將資料從一個位置移動到另一個位置的簡單方法是 Web 應用程式上的拖放功能。
在這篇文章中，我展示瞭如何使用 JavaScript 拖放程式設計來移動和儲存 HTML 元素資料和檔案的三個範例。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Example 0: Drag and Drop HTML text/elements</h1>
<div id="HTML_text" draggable="true" class="dragElement">HTML text</div>
<br><br>
<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>
<style>
.dropArea { height: 200px;
width: 200px;
border-radius: 15px;
border: 0.25px solid black;
background-color: #7084c4;
}
.HTML_text { cursor: move; }
</style>
<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];
// ----------------------------------------------------
// Drag functionality: Example 0
// ----------------------------------------------------
document.getElementById("HTML_text").addEventListener("dragstart", processEvent_drag_example0, false);
// document.getElementById("HTML_text").addEventListener("dragend", processEvent_drag_example0, false); // to stop
function processEvent_drag_example0(event) {
example = 0;
event.dataTransfer.setData('text/plain', event.target.id);
}
// ----------------------------------------------------
// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);
function processEvent_drop(event) {
// Stop defaults and allow drop events
event.preventDefault();
// Detects files dragged from pc
html_element_drag_list_metaData.push(event.dataTransfer.files);
console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);
// Detects html elements dragged from the html page
const data = event.dataTransfer.getData('text/plain');
console.log('data: ', data);
if (data.length != 0) {
// find the draggable element based on the data
const dragElement = document.getElementById(data);
console.log('dragElement: ', dragElement);
// Append the draggable element
event.target.appendChild(dragElement);
}
}
function processEvent_dragover(event) {
// Stop defaults and allow drop events
event.preventDefault();
}
// -------------------------------------------------
</script>
</body>
</html>
在範例 0 中，HTML 文字元素實際上已移至放置區域。 HTML 文字的 div 的 id 出現在變數資料中，因此可以追蹤 dropArea 內的元素 id。此範例對於組織/儲存在 Web 應用程式上編寫的現有 html 非常有用，但在大多數資料攝取情況下，人們希望組織/儲存來自不同位置的資料。
此範例是拖曳 HTML 元素和拖曳檔案之間的交叉範例。可以使用「瀏覽」按鈕選擇一個檔案；將檔案拖曳到瀏覽按鈕或點選瀏覽按鈕選擇檔案。選擇檔案後會出現一個表情符號，表情符號的出現以 HTML 元素的形式表示該檔案。然後可以將代表檔案的 HTML 元素 emoji 拖曳到 dropArea 進行資料擷取/儲存。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Example 1: Click button create drag and drop elements</h1>
<input type="file" id="upload_file" accept="audio/*" style="display:block" multiple>
<div id="file_name" style="display:none"></div>
<div id="base64_string" style="display:none"></div>
<div id="base64_string_icon" draggable="true" class="dragElement" style="display:none">?</div>
<br><br>
<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>
<style>
.dropArea { height: 200px;
width: 200px;
border-radius: 15px;
border: 0.25px solid black;
background-color: #7084c4;
}
.HTML_text { cursor: move; }
</style>
<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];
// ----------------------------------------------------
// Drag functionality: Example 1
// ----------------------------------------------------
// The eventlistener needs to be always running, to detect which file the user selected with browse
document.getElementById("upload_file").addEventListener("change", previewInput_drop, false);
async function previewInput_drop(event) {
// Take the first file
const file = event.target.files[0]; // first file in the list of selected files, better for selecting multiple files at one time
// console.log("file :", file);
document.getElementById("file_name").innerHTML = file.name;
// ---------------------
const reader = new FileReader();
reader.onload = async function(e){
document.getElementById("base64_string").innerHTML = e.target.result;
document.getElementById("base64_string_icon").style.display = "block";
}
reader.readAsDataURL(file);
}
document.getElementById("base64_string_icon").addEventListener("dragstart", processEvent_drag_example1, false);
function processEvent_drag_example1(event) {
example = 1;
event.dataTransfer.setData('text/plain', event.target.id);
}
// ----------------------------------------------------
// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);
function processEvent_drop(event) {
// Stop defaults and allow drop events
event.preventDefault();
// Detects files dragged from pc
html_element_drag_list_metaData.push(event.dataTransfer.files);
console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);
// Detects html elements dragged from the html page
const data = event.dataTransfer.getData('text/plain');
console.log('data: ', data);
if (data.length != 0) {
// find the draggable element based on the data
const dragElement = document.getElementById(data);
console.log('dragElement: ', dragElement);
// Append the draggable element
event.target.appendChild(dragElement);
}
}
function processEvent_dragover(event) {
// Stop defaults and allow drop events
event.preventDefault();
}
// -------------------------------------------------
</script>
</body>
</html>
在此範例中，可以一次有效率地將多個檔案拖曳到 dropArea。
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Example 2: Drag and drop files</h1>
<input type="file" id="upload_file_dragdrop" style="display:block" class="dropArea1" multiple>
<br><br>
<button id="use_moved_data" onclick="use_moved_data()">use_moved_data</button>
<!-- ---------------------------------------- -->
<!-- CSS -->
<style>
.dropArea1 { height: 200px;
width: 200px;
border-radius: 15px;
border: 0.25px solid black;
background-color: #56b06e;
}
</style>
<!-- ---------------------------------------- -->
<script>
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];
// ----------------------------------------------------
// Drag and Drop functionality: Example 2
// ----------------------------------------------------
document.getElementById("upload_file_dragdrop").addEventListener("change", previewInput, false);
async function previewInput(event) {
// For multiple files
const allFiles = event.target.files;
// console.log("allFiles :", allFiles);
var i = 0;
while (i < allFiles.length) {
const file = allFiles[i];
// console.log("file :", file);
await obtain_fileInfo(file)
.then(base64str => { other_data_related_to_dragEvent[file.name] = base64str; })
.catch(error => console.error(error));
i = i + 1;
}
// ---------------------
}
async function obtain_fileInfo(file) {
var base64_string = await new Promise((resolve) => {
const reader = new FileReader();
reader.onload = async function(e){
resolve(e.target.result); // inside resolve is the value that the function returns
};
reader.readAsDataURL(file);
});
return base64_string;
}
// ----------------------------------------------------
async function use_moved_data() {
console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);
console.log('other_data_related_to_dragEvent: ', other_data_related_to_dragEvent);
}
</script>
</body>
</html>
我們可以看到拖入dropArea的三個檔案的base64字串資料！然後可以將 Base64 字串資料儲存為 Blob 物件並透過 Internet 傳輸。
我希望這些拖放 HTML 元素和檔案的方法對某人有幫助。
祝你練習愉快！ ？
？ GitHub | ？練習 Datscy @ Dev.to | ？練習 Datscy @ Medium
以上是拖放 HTML 元素和文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
