迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

让 React 组件/Div 可拖动

作者:迹忆客 最近更新:2023/03/07 浏览次数:

现在成为网站建设者或者选择网站建设作为一种爱好很有趣。你可以简单地使用鼠标选择内容并排列它们来构建网站,就像拼图一样。

当我们创建使用户能够轻松拖放项目的内容或应用程序时,它使应用程序易于使用,即使对于新手也是如此,这可能会导致该应用程序在市场上得到广泛接受。

当我们在 React 中构建应用程序或游戏时,拖放内容的能力可以轻松快速地完成这些任务,即使是更复杂的任务。

让我们看一些示例,这些示例将帮助我们学习如何使组件可拖动。

React 的可拖动特性利用了大量的事件侦听器,但本示例将利用三个:onMouseDownonMouseMoveonMouseUp

我们首先创建一个新的 React 项目。我们在 VS Code 中打开终端并输入 npx create-react-app dragone

然后我们导航到 dragone 文件夹并创建两个文件夹。第一个文件夹将命名为 Main,在其中,我们将创建 MainApp.jsMainApp.css 文件。

这些文件将包含主页的代码。

第二个文件夹将命名为 Components,其中包含两个文件 Dialog.jsDialog.css。这些将是我们想要在浏览器屏幕上拖动的组件。

MainApp.js 中,我们将输入以下代码:

代码片段(MainApp.js):

import React, { Component } from 'react';
import './MainApp.css';
import Dialog from '../Components/Dialog';


export default class MainApp extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showDialog: false
        }
    }

    _showDialog() {
        this.setState({showDialog: !this.state.showDialog});
    }

    render() {

        return (
            <div className='MainApp'>
                <div className='Title'>Example Dialog Popper</div>
                <div className='button' onClick={this._showDialog.bind(this)}> Show Dialog </div>
                <Dialog onClose={this._showDialog.bind(this)} show={this.state.showDialog}/>
            </div>
        );
    }
}

在这个页面上,一旦点击 Show Dialog 按钮,onClick 事件监听器被激活,并且它弹出我们想要拖动的组件。

MainApp.css 包含美化页面的样式:

代码片段(MainApp.css):

.Title {
    font-weight: bold;
    font-size: 16px;
    padding-top: 30px;
}

.button {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 30px;
    padding: 10px;
    margin: 10px;
    margin-left: 650px;
}

.MainApp {
    background-color: lightsalmon;
    height: 1000px;
}

我们移动到这个例子的最佳部分,我们创建了可拖动组件。我们进入 Dialog.js,然后进行一些编码:

代码片段(Dialog.js):

import React, { Component } from 'react';
import './Dialog.css';

export default class Dialog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            diffX: 0,
            diffY: 0,
            dragging: false,
            styles: {}
        }

        this._dragStart = this._dragStart.bind(this);
        this._dragging = this._dragging.bind(this);
        this._dragEnd = this._dragEnd.bind(this);
    }

    _dragStart(e) {
        this.setState({
            diffX: e.screenX - e.currentTarget.getBoundingClientRect().left,
            diffY: e.screenY - e.currentTarget.getBoundingClientRect().top,
            dragging: true
        });
    }

    _dragging(e) {

        if(this.state.dragging) {
            var left = e.screenX - this.state.diffX;
            var top = e.screenY - this.state.diffY;

            this.setState({
                styles: {
                    left: left,
                    top: top
                }
            });
        }
    }

    _dragEnd() {
        this.setState({
            dragging: false
        });
    }

    render() {
        var classes = this.props.show ? 'Dialog' : 'Dialog hidden';
        return (
            <div className={classes} style={this.state.styles} onMouseDown={this._dragStart} onMouseMove={this._dragging} onMouseUp={this._dragEnd}>
                <div className='DialogTitle'>My Dialog</div>
                <div className='Contents'>
                    Contents of the Dialog:
                        - one
                        - two
                        - three
                </div>
                <div className='closeButton' onClick={this.props.onClose}>
                    Close
                </div>
            </div>
        );
    }
}

我们定义了我们希望组件在每种情况下所处的状态。在默认状态下,组件不会移动到任何地方,我们将拖动设置为 false

然后我们绑定组件将处于的三个状态,即 dragStartdraggingdragEnd,并将每个状态分配给适合的 onMouse 事件侦听器。一旦鼠标放在组件上,onMouseDown 激活,然后分配给 _dragStart 的函数开始工作。

onMouseMove 表示正在拖动组件,这将激活分配给 _dragging 的功能。

最后,onMouseUp 表示鼠标不再放置在组件上。这将激活与 _dragEnd 相关的功能。

Dialog.css 是用于设置可拖动组件样式的代码:

代码片段(Dialog.css):

.Dialog {
    width: 400px;
    height: 400px;
    background-color: lightblue;
    border-radius: 10px;
    border: 3px solid grey;
    position: absolute;
    cursor: move;
    top: 150px;
    left: 520px;
}

.hidden {
    display: none;
}

.DialogTitle {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid grey;
}

.Contents {
    padding-top: 50px;
    padding-bottom: 200px;
}

.closeButton {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 25px;
    padding: 10px;
    margin: 10px;
    margin-left: 140px;
    cursor: pointer;
}

然后我们将 MainApp 导入 App.js 中,如下所示:

代码片段(App.js):

import React from 'react';
import './App.css';
import MainApp from './Main/MainApp.js';

function App() {
  return (
    <div className="App">
      <MainApp />
    </div>
  );
}

export default App;

输出:

用 onMouse React 组件 div 可拖动

我们还可以利用 react 的依赖项使组件可拖动。在我们使用 npx create-react-app dragtwo 创建新项目后。

我们导航到 dragtwo 文件夹以安装依赖项。在我们的终端中,我们输入 npm install react-draggable

然后我们会去 App.js 做一点编码:

代码片段(App.js):

import logo from './logo.svg';
import './App.css';
import Draggable from "react-draggable";

function App() {
  return (
    <Draggable>
      <img
      src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
      alt="new"
      />
    </Draggable>
  );
}

export default App;

首先,我们从 react-draggable 导入 Draggable。然后我们创建可拖动的组件。

然后我们将该组件包装在 <Draggable></Draggable> 标记中。

React 的 Beautiful DnD 依赖项是另一个简单易用的库,可用于使组件可拖动。

要启动,我们首先创建我们的 react 组件,然后导航到项目文件夹以安装依赖项:install react-beautiful-dnd --save

接下来,我们打开 App.js 文件并输入以下代码:

代码片段(App.js):

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './App.css';

const finalSpaceCharacters = [
  {
    id: 'james',
    name: 'James',
  },
  {
    id: 'john',
    name: 'John',
  },
  {
    id: 'israel',
    name: 'Israel',
  },
  {
    id: 'joker',
    name: 'Joker',
  },
  {
    id: 'quinn',
    name: 'Quinn',
  }
]

function App() {
  const [characters, updateCharacters] = useState(finalSpaceCharacters);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(characters);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    updateCharacters(items);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul className="characters" {...provided.droppableProps} ref={provided.innerRef}>
                {characters.map(({ id, name }, index) => {
                  return (
                    <Draggable key={id} draggableId={id} index={index}>
                      {(provided) => (
                        <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>

                          <p>
                            {name}
                          </p>
                        </li>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
    </div>
  );
}

export default App;

输出:

用漂亮的 dnd React 组件 div 可拖动

要启动,我们首先创建一个需要拖动和重新排序的名称数组。然后我们使用拼接方法,这样一旦我们将一个项目从它的位置取出,它就会自动被下一个项目替换。

接下来,我们创建处理项目拖放的函数。在创建用于拖动组件的函数之后,我们将所有这些函数包装在 <Draggable></Draggable> 标记中。

我们创建用于放置项目的函数,并将其包装起来,包括 <Droppable></Droppable> 内的 draggable 标签中的函数,然后我们将所有这些包装在 <DragDropContext></DragDropContext>中标签。

React 的灵活性使得几乎每个项目都可以直接创建。React 拖动功能对于为用户创建游戏和易于使用的应用程序非常有用。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间:2023/03/15 浏览次数:198 分类:React

React 中在 map() 中使用条件: 在数组上调用 map() 方法。 使用 if 条件,如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

在 React 中调用多个 onClick 函数

发布时间:2023/03/15 浏览次数:160 分类:React

在 React 中调用多个 onClick 函数: 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s

在 React 中按类名查找所有元素

发布时间:2023/03/15 浏览次数:171 分类:React

在 React 中通过 className 查找所有元素: 使用 getElementsByClassName 方法获取具有特定类的所有元素。 将对该方法的调用放在 useEffect() 钩子中。 import {useEffect} from react ; const App = () = { useEf

在 React 中检查元素是否获取到焦点

发布时间:2023/03/15 浏览次数:154 分类:React

要检查元素是否在 React 中获得焦点: 在元素上设置 ref 属性。 元素呈现后,检查元素是否是文档中的活动元素。 如果是,则该元素被聚焦。 import {useEffect, useRef} from react ; export defaul

在 React 中悬停时显示元素或文本

发布时间:2023/03/13 浏览次数:160 分类:React

在 React 中悬停时显示元素或文本: 在元素上设置 onMouseOver 和 onMouseOut 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染另一个元素。 import {useStat

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便