基于react-draggable拖拽的antd-card卡片限定范围内拖拽

置顶

L9009121314

于 2021-07-04 00:22:42 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： reactjs es6 前端 js 经验分享

本文链接：https://blog.csdn.net/L9009121314/article/details/118424448

本文分享了如何在React项目中利用react-draggable库，结合antd-card组件，创建一个可以在限定范围内拖动的提示窗口。该窗口在页面上固定并允许用户在不干扰下层表单输入的情况下进行拖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近有个项目需求是点击问号显示提示窗口，窗口固定不随滚动条滚动，并可在范围内拖拽。又不影响下层表单输入。

我想到用antd-card结合react-draggable来实现。这里记录下实现代码：

import React from 'react';
import { Modal, Button, Card, Icon } from 'antd';
import Draggable from 'react-draggable';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cardShow: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 }, // 初始化拖动边界
        };
        this.draggleRef = React.createRef();
    }

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = this.draggleRef.current.getBoundingClientRect();
        this.setState({
            // 设置拖动边界，限定初始位置的上下左右可拖动距离，如下设置就是在浏览器视窗内可拖动
            // 如果页面有固定显示头部，须在头部以下可拖动，可以设置 top: -targetRect.top + uiData.y + 头部高度，
            bounds: {
                left: -targetR