Seret dan Lepaskan elemen dan fail HTML-tutorial js-php.cn

Aplikasi web boleh berguna untuk pengumpulan/pengingesan data. Jika mekanisme untuk mengumpul dan menyimpan data mudah digunakan, banyak data berguna boleh dikumpulkan untuk pemprosesan data. Satu cara mudah untuk mengalihkan data dari satu lokasi ke lokasi lain ialah fungsi Seret dan lepas pada apl web.

Dalam siaran ini, saya menunjukkan tiga contoh untuk cara mengalih dan menyimpan data elemen HTML serta fail menggunakan pengaturcaraan seret dan lepas JavaScript.

Contoh 0: Seret dan lepaskan elemen 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>

Salin selepas log masuk

Sebelum menyeret dan menjatuhkan teks HTML (teks HTML) ke dropArea ungu

Drag and Drop HTML elements and files

Selepas menyeret dan menjatuhkan teks HTML (teks HTML) ke dropArea ungu

Drag and Drop HTML elements and files

Dalam contoh 0, elemen teks HTML sebenarnya telah dialihkan ke kawasan drop. Id div untuk teks HTML muncul dalam data pembolehubah, oleh itu seseorang boleh menjejaki id elemen di dalam dropArea. Contoh ini berguna untuk mengatur/menyimpan html sedia ada yang ditulis pada apl web, tetapi dalam kebanyakan situasi pengingesan data seseorang ingin mengatur/menyimpan data dari tempat yang berbeza.

Contoh 1: muat naik fail diwakili sebagai elemen HTML/emoji yang boleh diseret

Contoh ini ialah persilangan antara menyeret elemen HTML dan menyeret fail. Seseorang boleh memilih fail menggunakan butang Semak imbas; seret fail ke butang semak imbas atau klik pada butang semak imbas untuk memilih fail. Kemudian emoji muncul selepas fail dipilih, penampilan emoji mewakili fail dari segi elemen HTML. Emoji elemen HTML, mewakili fail, kemudiannya boleh diseret ke dropArea untuk pengingesan/penyimpanan data.

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

Salin selepas log masuk

Sebelum memilih fail

Drag and Drop HTML elements and files

Menyeret fail ke butang semak imbas

Drag and Drop HTML elements and files

Menyeret emoji fail wakil ke dropArea

Drag and Drop HTML elements and files

Contoh 2: Seret dan lepaskan elemen HTML

Dalam contoh ini, seseorang boleh menyeret berbilang fail dengan cekap ke dropArea pada satu masa.

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

Salin selepas log masuk

Sebelum menyeret fail ke dalam dropArea

Drag and Drop HTML elements and files

Selepas menyeret fail ke dalam dropArea dan menolak butang use_moved_data

Drag and Drop HTML elements and files

Kita boleh melihat data rentetan base64 daripada tiga fail yang diseret ke dropArea! Data rentetan base64 kemudiannya boleh disimpan sebagai objek gumpalan dan dipindahkan ke seluruh Internet.

Saya harap cara ini untuk menyeret dan melepaskan elemen HTML dan fail membantu seseorang.

Selamat Berlatih! ?

? GitHub | ? Mempraktikkan Datscy @ Dev.to | ? Mengamalkan Datscy @ Medium

Rujukan

Cara Mencipta Fungsi Seret dan Lepas dalam JavaScript: Tutorial Langkah demi Langkah: https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionality-in-javascript- a-step-by-step-tutorial-8ea236ef9416
Baca fail dalam JavaScript: https://web.dev/articles/read-files

Atas ialah kandungan terperinci Seret dan Lepaskan elemen dan fail HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!