ホームページ > 記事 > ウェブフロントエンド > HTML 要素とファイルをドラッグアンドドロップする

HTML 要素とファイルをドラッグアンドドロップする

王林オリジナル: 2024-09-12 10:31:20284ブラウズ

Web アプリはデータの収集/取り込みに役立ちます。データを収集して保存する仕組みが使いやすければ、データ処理に役立つデータを大量に蓄積できます。ある場所から別の場所にデータを移動する簡単な方法の 1 つは、Web アプリのドラッグアンドドロップ機能です。

この投稿では、JavaScript ドラッグアンドドロッププログラミングを使用して HTML 要素のデータとファイルを移動および保存する方法の 3 つの例を示します。

例 0: 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>

HTMLテキスト（HTMLテキスト）を紫色のdropAreaにドラッグ＆ドロップする前

Drag and Drop HTML elements and files

HTMLテキスト（HTMLテキスト）を紫色のdropAreaにドラッグ＆ドロップ後

Drag and Drop HTML elements and files

例 0 では、HTML テキスト要素が実際にドロップ領域に移動されました。 HTML テキストの div の ID は変数データに表示されるため、dropArea 内の要素 ID を追跡できます。この例は、Web アプリ上に記述された既存の HTML を整理/保存するのに役立ちますが、ほとんどのデータ取り込み状況では、別の場所からデータを整理/保存する必要があります。

例 1: ファイルのアップロードは、ドラッグ可能な HTML 要素/絵文字として表されます。

この例は、HTML 要素のドラッグとファイルのドラッグを組み合わせたものです。「参照」ボタンを使用してファイルを選択できます。ファイルを参照ボタンにドラッグするか、参照ボタンをクリックしてファイルを選択します。ファイルが選択されると絵文字が表示され、絵文字の外観は HTML 要素の観点からファイルを表します。ファイルを表す HTML 要素の絵文字を、データの取り込み/保存のためにドロップエリアにドラッグできます。

<!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>

ファイルを選択する前に

Drag and Drop HTML elements and files

ファイルを参照ボタンにドラッグしました

Drag and Drop HTML elements and files

代表的なファイルの絵文字をドロップエリアにドラッグしました

Drag and Drop HTML elements and files

例 2: 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>

ファイルをドロップエリアにドラッグする前に

Drag and Drop HTML elements and files

ファイルをドロップエリアにドラッグし、use_moved_data ボタンを押した後

Drag and Drop HTML elements and files

dropArea にドラッグされた 3 つのファイルの Base64 文字列データが表示されます。その後、base64 文字列データを BLOB オブジェクトとして保存し、インターネット経由で転送できます。

HTML 要素とファイルをドラッグアンドドロップするこれらの方法が誰かのお役に立てば幸いです。

楽しく練習してください! ?

?ギットハブ | ? Datscy の練習 @ Dev.to | ? Datscy を練習中 @ Medium

参考文献

JavaScript でドラッグアンドドロップ機能を作成する方法: ステップバイステップのチュートリアル: https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionity-in-javascript-ステップバイステップチュートリアル-8ea236ef9416
JavaScript でファイルを読み取る: https://web.dev/articles/read-files

以上がHTML 要素とファイルをドラッグアンドドロップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html String Object if for select using Collection this location github https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Fetch を使用した AbortController次の記事：Fetch を使用した AbortController

続きを見る

HTML 要素とファイルをドラッグ アンド ドロップする

例 0: HTML 要素をドラッグ アンド ドロップする

HTMLテキスト（HTMLテキスト）を紫色のdropAreaにドラッグ＆ドロップする前

HTMLテキスト（HTMLテキスト）を紫色のdropAreaにドラッグ＆ドロップ後

例 1: ファイルのアップロードは、ドラッグ可能な HTML 要素/絵文字として表されます。

ファイルを選択する前に

ファイルを参照ボタンにドラッグしました

代表的なファイルの絵文字をドロップエリアにドラッグしました

例 2: HTML 要素をドラッグ アンド ドロップする

ファイルをドロップエリアにドラッグする前に

ファイルをドロップエリアにドラッグし、use_moved_data ボタンを押した後

参考文献

関連記事

HTML 要素とファイルをドラッグアンドドロップする

例 0: HTML 要素をドラッグアンドドロップする

例 2: HTML 要素をドラッグアンドドロップする