export default DragLine; 使用: 我这里是左侧面板可拖拽宽度,当然也可以是右侧面板,如需上下拖动,可以先定义高度,然后通过子组件调用handleChange传回的offsetY操作即可。 import React, { useState } from 'react'; import DragLine from '../../components/DragBox'; import './style.less'; const maxWidth =...
开门见山,首先上一个简单的例子。 import{DraggableContainer,DraggableChild}from'react-dragline'constchildren=[{id:1,position:{x:100,y:10}},{id:2,position:{x:400,y:200}},]constcontainerStyle={height:600,position:'relative',}constchildStyle={width:100,height:100,cursor:'move',background:'#8...
import{DraggableContainer,DraggableChild}from'react-dragline'classExampleextendsReact.Component{state=[{id:1,position:{x:100,y:10}},{id:2,position:{x:400,y:200}},]render(){constcontainerStyle={height:600,position:'relative',}return(<DraggableContainerstyle={containerStyle}>{this.state.children....
react-rnd-dragline 这是一个基于 react-rnd 实现的拖拽组件,在rnd的功能基础上增加了拖拽时显示辅助线及吸附的功能。 安装 $ npm i react-rnd-dragline or $ yarn add react-rnd-dragline 使用 属性 DragArea bounds: RndProps['bounds'] 默认值为空 ""...
封装React组件DragLine,鼠标拖拽的边框改变元素宽度 在项目中,设计说想做个面板,其宽度随鼠标拖拽而变化,有最大最小值。基于这个小功能封装一个可拖拽组件,在需要的地方引入即可。 思路 这里只是实现x方向的拖拽,y轴拖拽思路差不多。 既然是鼠标操作,那肯定得监听鼠标事件,当鼠标按下(mouseDown)时,监听mouseMove事件...