移动端可拖动抽屉组件

react-drag-drawer

npm install react-drag-drawer --save

或

react-draggable

npm install react-draggable

创建一个可拖拽的Drawer组件：

import React, { useState } from 'react';
import Draggable from 'react-draggable';
import './Drawer.css';
 
const Drawer = ({ children, width = 250 }) => {
  const [isOpen, setIsOpen] = useState(true);
 
  const toggleDrawer = (open) => event => {
    if (
      event.type === 'keydown' &&
      (event.key === 'Tab' || event.key === 'Shift')
    ) {
      return;
    }
 
    setIsOpen(open);
  };
 
  return (
    <div>
      <Draggable
        axis="x"
        position={{ x: 0, y: 0 }}
        grid={[width, width]}
        onStart={toggleDrawer(false)}
        onStop={toggleDrawer(true)}
      >
        <div
          className="drawer"
          style={{ width }}
          role="button"
          tabIndex="0"
          onClick={toggleDrawer(true)}
          onKeyDown={toggleDrawer(true)}
        >
          {isOpen && children}
        </div>
      </Draggable>
    </div>
  );
};
 
export default Drawer;

在Drawer.css文件中添加样式：

.drawer {
  background-color: #303030;
  color: white;
  position: fixed;
  top: 0;
  z-index: 1000;
  height: 100vh;
  transition: transform 0.2s ease-out;
}
 
.drawer.react-draggable-dragging {
  z-index: 1001;
  will-change: transform;
}
 
.drawer[style] {
  transform: translateX(0);
}

在主组件中使用Drawer：

import React from 'react';
import Drawer from './Drawer';
 
const App = () => (
  <div>
    <Drawer width={300}>
      <p>这里是可拖拽的内容</p>
    </Drawer>
  </div>
);
 
export default App;

这Drawer组件可以被拖拽至屏幕边缘并在拖拽时打开或关闭。可以通过调整width属性来改变Drawer的宽度，并且可以通过children属性来设置Drawer内的内容

react-draggable实现拖拽功能实例详解

react-draggable实现拖拽功能实例详解_React_脚本之家