使用 React 从头开始​​拖放

使用 React 从头开始​​拖放

让我们创建一组 React 组件来处理拖放

拖放是互联网的奥秘之一。我们在开发人员的生活中都使用过一次，但实际上我们从未想过它是如何工作的。好吧，今天，它会改变！

这篇文章纯粹是提供信息。所有框架都有大量的拖放库，我强烈建议您使用其中之一！

理解

在开始任何编码之前，让我们尝试更多地了解拖放的工作原理。

拖放是 主要由您的浏览器处理 .要允许元素可拖动，您所要做的就是添加 可拖动=“真” 属性到你的 div

使用 a 进行拖放工作 容器系统 .一个容器将包含您的可拖动项目，您将其拖放到另一个容器中。

制作容器也有一些工作 准备好接受可拖动项目 .

最后，我们必须 处理丢弃并更新我们的状态 .

就这么简单！让我们看看它是如何与 React 一起工作的。

创建我们的组件

在开始拖放之前，我们将开始 创建我们的组件 让我们的生活更轻松。

首先，让我们创建我们的 可拖动项目 .该项目将是一个简单的文本，以便我们可以拖动它。我们还将设置我们的属性 可拖动的 为真。

 常量可拖动 = () => {  
 返回 （  
 <div draggable>  
 拉我一把  
 </div>  
 )  
 }  
  
 导出默认 Draggable；

接下来，让我们创建一个 盒子组件 .该组件将是一个容器，用于容纳可拖动项目：

 导入'./App.css'  
 从“./Draggable”导入 Draggable；  
  
 常量框 = ({ hasItem }) => {  
 返回 （  
 <div className="box">  
 {hasItem &&<Draggable/> ,  
 </div>  
 )  
 }  
  
 导出默认框；

也在我们的 应用程序.css 你会发现 盒子 班级：

 。盒子 {  
 显示：弯曲；  
 宽度：100px；  
 高度：100px；  
 边框：1px纯黑色；  
 证明内容：中心；  
 对齐项目：居中；  
 }

凉爽的！接下来，我们开始 使我们的容器准备好进行交互 使用我们的可拖动组件。

处理事件

我们将依赖 3 个事件：

• 拖入 ( 持票人 )
• 拖过去 ( 拖拉机 )
• 降低 ( 降低 )

我们要治疗 持票人 和 拖拉机 与此相同，但是 两者都需要使用

可拖动对象和容器之间的交互

让我们的可拖动项和容器交互的第一步是调用 event.preventDefault() 什么时候 持票人 或者 拖拉机 扳机。通过这样做，我们的容器将成为一个有效的目标：

 常量框 = ({ hasItem }) => {  
  
 const dragEnterOrOver = (e) => {  
 e.preventDefault();  
 }  
  
 返回 （  
 <div  
 onDragEnter={dragEnterOrOver}  
 onDragOver={dragEnterOrOver}  
 类名="框">  
 {hasItem &&<Draggable/> ,  
 </div>  
 )  
 }

同样让我们在我们的应用程序中使用我们的 Box 组件：

 返回 （  
 <div>  
 <Box hasItem/>  
 <Box/>  
 </div>  
 );

立即试用您的应用程序！如果拖动 拉我一把 并移动它，你会在鼠标旁边看到这个图标：

根据您的操作系统，它的显示会有所不同，但您会认出它！

您可能已经注意到，该图标也显示在当前选定的图标上方。这不是我们想要的。

让我们稍微修改一下代码，在初始框上不显示这个图标：

 const dragEnterOrOver = (e) => {  
 如果（hasItem）返回；  
 e.preventDefault();  
 }

移动我们的可拖动对象并保持状态

我们要做的第一件事是 为选择添加状态 （我们将在这里使用位置）和 以编程方式渲染 Box ：

 常量项目 = 3;  
  
 函数应用程序（）{  
 const [位置，setPosition] = useState(0);  
  
 返回 （  
 <div>  
 {  
        **_大批_** (ITEMS).fill(null).map((_, index) => {  
 返回  
 键={索引}  
 hasItem={索引 === 位置}  
 onSelect={() => setPosition(index)}/>  
 })  
 }  
 </div>  
 );  
 }

我知道使用索引作为键是一种不好的做法，但由于这个示例非常简单，我无法使用其他任何东西。

在 box 组件内部，让我们处理 drop 事件并调用 选择 打回来：

 常量框 = ({hasItem, onSelect}) => {  
  
 const dragEnterOrOver = (e) => {  
 如果（hasItem）返回；  
 e.preventDefault();  
 }  
  
 返回 （  
 <div  
 onDrop={onSelect}  
 onDragEnter={dragEnterOrOver}  
 onDragOver={dragEnterOrOver}  
 类名=“盒子”  
 >  
 {hasItem &&<Draggable/> ,  
 </div>  
 )  
 }

瞧！现在再次尝试您的应用程序，您将能够将您的可拖动对象从一个容器移动到另一个容器！

我希望这篇文章能帮助您更好地理解拖放的工作原理！

如果有，请不要犹豫，拍手或关注！

本文基于 本指南 .

[

使用 Node.js 压缩文件夹

如何使用 Node.js 将文件夹和文件压缩成 ZIP

javascript.plainenglish.io

](https://javascript.plainenglish.io/zip-a-folder-with-node-js-5cd940c5c4fe)

[

如何使用 Node.js 解压缩文件

在 FS 能够提供的所有功能中，解压缩不是其中之一。让我们看看如何使用 Node.js 做到这一点

javascript.plainenglish.io

](https://javascript.plainenglish.io/unzip-a-file-with-nodejs-5f94b360f7df)

[

使用 Node.js 的服务器发送事件

从您的后端接收定期更新，而不会通过 HTTP 请求发送垃圾邮件

javascript.plainenglish.io

](https://javascript.plainenglish.io/server-sent-events-with-nodejs-bbdc9a9584cb)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/33264/40081309