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”），其中包含有关拖放过程的信息以及事件属性（例如按下的键）。通过应用这些函数及其属性，我们可以个性化我们的网页如何响应拖放活动，从而使我们的网站对用户更具吸引力。