Ziehen Sie HTML-Elemente und -Dateien per Drag & Drop-js-Tutorial-php.cn

Webapps können für die Datenerfassung/-aufnahme nützlich sein. Wenn der Mechanismus zum Sammeln und Speichern von Daten einfach zu verwenden ist, können viele nützliche Daten für die Datenverarbeitung gesammelt werden. Eine einfache Möglichkeit, Daten von einem Ort an einen anderen zu verschieben, ist die Drag-and-Drop-Funktion in Webanwendungen.

In diesem Beitrag zeige ich drei Beispiele für das Verschieben und Speichern von HTML-Elementdaten und -Dateien mithilfe der JavaScript-Drag-and-Drop-Programmierung.

Beispiel 0: Ziehen Sie ein HTML-Element per Drag & Drop

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

Nach dem Login kopieren

Bevor Sie den HTML-Text (HTML-Text) per Drag & Drop in die violette DropArea ziehen

Drag and Drop HTML elements and files

Nach dem Ziehen und Ablegen des HTML-Textes (HTML-Text) in die violette DropArea

Drag and Drop HTML elements and files

In Beispiel 0 wurde das HTML-Textelement tatsächlich in den Drop-Bereich verschoben. Die ID des Div für HTML-Text erscheint in den Variablendaten, sodass man die Element-IDs innerhalb der dropArea verfolgen kann. Dieses Beispiel eignet sich zum Organisieren/Speichern von vorhandenem HTML, das in einer Webanwendung geschrieben wurde. In den meisten Fällen der Datenaufnahme möchte man jedoch Daten von verschiedenen Orten organisieren/speichern.

Beispiel 1: Ein Datei-Upload wird als ziehbares HTML-Element/Emoji dargestellt

Dieses Beispiel ist eine Mischung aus dem Ziehen eines HTML-Elements und dem Ziehen einer Datei. Über die Schaltfläche „Durchsuchen“ kann eine Datei ausgewählt werden. Ziehen Sie eine Datei auf die Schaltfläche „Durchsuchen“ oder klicken Sie auf die Schaltfläche „Durchsuchen“, um eine Datei auszuwählen. Nachdem die Datei ausgewählt wurde, erscheint dann ein Emoji. Das Erscheinungsbild des Emojis stellt die Datei in Form eines HTML-Elements dar. Das HTML-Element Emoji, das eine Datei darstellt, kann dann zur Datenaufnahme/-speicherung in die DropArea gezogen werden.

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

Nach dem Login kopieren

Bevor Sie eine Datei auswählen

Drag and Drop HTML elements and files

Habe eine Datei auf die Schaltfläche „Durchsuchen“ gezogen

Drag and Drop HTML elements and files

Das repräsentative Datei-Emoji wurde in die DropArea gezogen

Drag and Drop HTML elements and files

Beispiel 2: Ziehen Sie ein HTML-Element per Drag & Drop

In diesem Beispiel kann man mehrere Dateien gleichzeitig effizient in die DropArea ziehen.

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

Nach dem Login kopieren

Bevor Sie Dateien in die DropArea ziehen

Drag and Drop HTML elements and files

Nachdem Sie Dateien in die DropArea gezogen und auf die Schaltfläche „use_moved_data“ geklickt haben

Drag and Drop HTML elements and files

Wir können die Base64-String-Daten der drei Dateien sehen, die in die DropArea gezogen wurden! Die Base64-String-Daten können dann als Blob-Objekt gespeichert und über das Internet übertragen werden.

Ich hoffe, dass diese Möglichkeiten zum Ziehen und Ablegen von HTML-Elementen und -Dateien jemandem helfen.

Viel Spaß beim Üben! ?

? GitHub | ? Datscy üben @ Dev.to | ? Datscy @ Medium üben

Referenzen

So erstellen Sie Drag-and-Drop-Funktionalität in JavaScript: Eine Schritt-für-Schritt-Anleitung: https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionality-in-javascript- eine-Schritt-für-Schritt-Anleitung-8ea236ef9416
Dateien in JavaScript lesen: https://web.dev/articles/read-files

Das obige ist der detaillierte Inhalt vonZiehen Sie HTML-Elemente und -Dateien per Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!