ReactJS - 拖拽事件處理程式

在 React JS 中，有一個名為 DragEvent 的事件處理程式函式。DragEvent 處理程式函式是一個 Web 開發函式，用於控制和響應使用者在網頁上拖放專案時發生的事件。這些 HTML 拖放 API 事件使使用者能夠使 Web 專案可拖動併為其定義放置區域。

語法

<>
   <div
      draggable={true}
      onDragStart={e => console.log('onDragStart')}
      onDragEnd={e => console.log('onDragEnd')}
   >
      Source
   </div>   
   <div
      onDragEnter={e => console.log('onDragEnter')}
      onDragLeave={e => console.log('onDragLeave')}
      onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
      onDrop={e => console.log('onDrop')}
   >
      Destination
   </div>
</>

DragEvent 處理程式函式對於建立互動式和使用者友好的 Web 介面非常重要。它們允許我們控制在開始拖動某物、進入放置區域、離開放置區域、將拖動的專案移動到放置區域以及將其放下時發生的情況。這些功能使我們能夠調整我們的網頁如何響應拖放活動。

引數

一個名為“e”的特定物件作為引數傳送到 DragEvent 處理程式方法。這個“e”物件儲存關於拖放事件的重要資訊，例如正在傳輸哪個專案，以及描述事件的屬性，例如是否按下了特定的“Ctrl”或“Shift”鍵。

以下是“e”物件的重要屬性：

示例

示例 - 拖放應用

因此，我們正在建立一個簡單的應用程式，它顯示了處理程式函式“DragEvent”的用法。它建立了一個基本的拖放介面，其中包含一個拖動源專案和一個目標專案，我們可以在其中放置拖動的物件。讓我們來看一下程式碼：

import react, { usestate } from "react";

function app(){
   return (
      <div>
         <>
            <div
               draggable={true}
               ondragstart={(e) => console.log("ondragstart")}
               ondragend={(e) => console.log("ondragend")}
            >
               source  for dragging
            </div>      
            <div
               ondragenter={(e) => console.log("ondragenter")}
               ondragleave={(e) => console.log("ondragleave")}
               ondragover={(e) => {
                  e.preventdefault();
                  console.log("ondragover");
               }}
               ondrop={(e) => console.log("ondrop")}
            >
               destination for dragging
            </div>
         </>
      </div>
   );
}

export default app;

輸出

我們提供的程式碼使用事件處理程式在拖放過程的不同階段將訊息記錄到控制檯。

示例 - 圖片上傳應用

現在讓我們為拖放圖片上傳建立一個簡單的 React 應用。在這個應用中，使用者將能夠拖放圖片來上傳它們，並在相簿中顯示上傳的圖片。因此，我們將使用 React DragEvent 處理程式來處理圖片拖放事件。我們還將使用 useState 來管理上傳圖片的列表。程式碼如下：

import React, { useState } from 'react';

const ImageUploadApp = () => {
   const [uploadedImages, setUploadedImages] = useState([]);   
   const handleDragOver = (e) => {
      e.preventDefault();
   };   
   const handleDrop = (e) => {
      e.preventDefault();      
      const files = Array.from(e.dataTransfer.files);
      
      // Update state with the new images
      setUploadedImages((prevImages) => [...prevImages, ...files]);
   };   
   return (
      <div>
         <div
            style={{ border: '2px dashed #ccc', padding: '20px' }}
            onDragOver={handleDragOver}
            onDrop={handleDrop}
         >
            <p>Drag and drop images here</p>
         </div>
         
         <div>
            <h2>Uploaded Images:</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
               {uploadedImages.map((image, index) => (
                  <img
                     key={index}
                     src={URL.createObjectURL(image)}
                     alt={`uploaded-${index}`}
                     style={{ width: '100px', height: '100px', margin: '5px' }}
                  />
               ))}
            </div>
         </div>
      </div>
   );
};

export default ImageUploadApp;

輸出

正如我們在輸出圖片中看到的，當圖片被拖放時，圖片就會出現在前端。我們可以根據具體要求自定義和增強此應用程式。

示例 - 測驗應用

讓我們為拖放測驗建立一個基本的 React 應用。在這個應用中，我們將顯示一個包含其對應答案選擇的題列表。此應用允許使用者拖放答案選擇以將其與正確的題匹配。因此，我們將使用 React DragEvent 處理程式來處理拖放功能。我們還將向用戶提供有關其答案是否正確的反饋。此應用程式的程式碼如下：

import React, { useState } from 'react';

const QuizApp = () => {
   const [questions, setQuestions] = useState([
      { id: 1, text: 'Who is known as the father of Artificial Intelligence?', correctAnswer: 'John McCarthy' },
      { id: 2, text: 'Chandrayaan3 landed on moon on which of the following date -', correctAnswer: '23rd August 2023' },
   ]);   
   const [userAnswers, setUserAnswers] = useState([]);   
   const handleDragStart = (e, answer) => {
      e.dataTransfer.setData('text/plain', answer);
   };   
   const handleDragOver = (e) => {
      e.preventDefault();
   };   
   const handleDrop = (e, questionId) => {
      e.preventDefault();
      
      // Get the dragged answer
      const droppedAnswer = e.dataTransfer.getData('text/plain');
      
      // Update userAnswers state
      setUserAnswers((prevAnswers) => [...prevAnswers, { questionId, answer: droppedAnswer }]);
   };
   
   const checkAnswers = () => {
      // Compare user answers with correct answers
      const feedback = userAnswers.map(({ questionId, answer }) => {
         const question = questions.find((q) => q.id === questionId);
         return {
            questionId,
            isCorrect: answer === question.correctAnswer,
         };
      });      
      console.log(feedback);
   };
   
   return (
      <div>
         <h2>Drag-and-Drop Quiz</h2>
         <div>
            {questions.map((question) => (
               <div
                  key={question.id}
                  style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}
                  onDragOver={handleDragOver}
                  onDrop={(e) => handleDrop(e, question.id)}
               >
                  <p>{question.text}</p>
                  <div
                     draggable
                     onDragStart={(e) => handleDragStart(e, question.correctAnswer)}
                     style={{ border: '1px solid #aaa', padding: '5px', cursor: 'move' }}
                  >
                  {question.correctAnswer}
                  </div>
               </div>
            ))}
         </div>
         <button onClick={checkAnswers}>Check Answers</button>
      </div>
   );
};

export default QuizApp;

輸出

此示例設定了一個測驗，使用者可以拖放正確的答案選擇以將其與相應的題匹配。單擊“檢查答案”按鈕時，應用程式會提供有關使用者答案正確性的反饋。我們可以根據我們的特定測驗要求進一步自定義此應用程式。

總結

DragEvent 處理程式函式用於管理 Web 專案在拖放時的行為。它們是開發互動式和使用者友好的 Web 介面所必需的。作為引數，這些方法接受一個事件物件（“e”），其中包含有關拖放過程的資訊以及事件屬性（例如按下的鍵）。透過應用這些函式及其屬性，我們可以個性化我們的網頁如何響應拖放活動，從而使我們的網站對使用者更具吸引力。