React拖拽组件

React拖拽组件

• 安装

npm install react-drag-ele --save-dev

复制代码

• 功能如下

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
const Drag = require('react-drag-ele');
let DragEle = Drag.DragEle;
let DropTarget = Drag.DropTarget;
let DragBox = Drag.DragBox;
import './index.scss';
class App extends Component {

  constructor(props,context) {
    super(props,context);
    this.state = {
      style: {
        position: "absolute",
        fontSize: 30,
        width: 300,
        height: 230,
        background: "#dcdcdc",
        lineHeight: "230px",
        textAlign:"center"
      }
    }
    }
    
  componentDidMount() {
    
  }

  render() {
    let {style} = this.state;
    return (
      <div className="content">
        {/* <DragEle
          onMouseUpPointer={this.onMouseUpPointer.bind(this)}
          isUseH5Drag={false} //是否使用H5拖拽属性
          moveX={false} //只能在X轴移动
          moveY={false} //只能在Y轴移动
          minMoveDistance={228} //最小移动距离
          maxMoveDistance={456} //最大移动距离
        >
          <div style={this.state.style}>这个是拖拽组件1</div>
        </DragEle> */}
        <DragEle
          isUseH5Drag={true} //是否使用H5拖拽属性
          minMoveDistance={228} //最小移动距离
          transition="ease-in-out 0.5s" //transition默认动画ease 时间默认0.3秒
        >
          <div style={this.state.style}>这个是拖拽组件2</div>
        </DragEle>

        <DragBox className="drag-box">

          <DragEle minMoveDistance={228}><div style={this.state.style}></div></DragEle>
        </DragBox>
        <DragBox className="drag-box">
          <DragEle maxMoveDistance={456}><div style={this.state.style}></div></DragEle>
        </DragBox>

        {
          [1].map((item,index) => {
            return (
              <DropTarget
                onDropOverEle={this.onDropOverEle.bind(this)}
                key={index}>
                <div style={{ width: 300, height: 230, border: "1px solid red", float: "left" }}>
                </div>
              </DropTarget>
            )
          })
        }
      </div>
    )
  }
}
ReactDOM.render(<App /> ,"#main");

复制代码

拖拽组件

    const Drag = require('react-drag-ele');
    let DragEle = Drag.DragEle;
复制代码

<DragEle
  onMouseUpPointer={this.onMouseUpPointer.bind(this)}
  isUseH5Drag={false} //是否使用H5拖拽属性
  moveX={false} //只能在X轴移动
  moveY={false} //只能在Y轴移动
  minMoveDistance={228} //最小移动距离
  maxMoveDistance={456} //最大移动距离
>
  <div style={this.state.style}>这个是拖拽组件1</div>
</DragEle>
复制代码

参数	说明	类型	默认值
onMouseUpPointer	回调函数,(pointer,location) => {} pointer: 当前鼠标坐标点,location: 当前元素的位置	function	null
moveX	只能在X轴移动	Boolean	false
moveY	只能在Y轴移动	Boolean	false
minMoveDistance	最小拖拽距离	number	null
maxMoveDistance	最大拖拽距离	number	null
transition	当设置了最小或最大移动距离属性，未达到该距离，回到原位置的过渡动画	string	ease 0.3s
isUseH5Drag	是否使用H5拖拽属性	Boolean	false
关于style	组件会直接使用div中的style,请直接传入style ,没有对ClassName做兼容	null	null

H5拖拽组件目标位置 DropTarget

    const Drag = require('react-drag-ele');
    let DragEle = Drag.DragEle;
    let DropTarget = Drag.DropTarget;
复制代码

<DropTarget onDropOverEle={this.onDropOverEle.bind(this)}
 key={index}>
  <div style={{ width: 300, height: 230, border: "1px solid red", float: "left" }}>
  </div>
</DropTarget>
复制代码

参数	说明	类型	默认值
onDropOverEle	回调函数,(pointer,location) => {} pointer: 当前鼠标坐标点,location: 当前元素的位置	function	null

限制拖拽范围DragBox

    const Drag = require('react-drag-ele');
    let DragEle = Drag.DragEle;
    let DragBox = Drag.DragBox;
复制代码

    <DragBox className="drag-box">
      <DragEle maxMoveDistance={456}><div style={this.state.style}></div></DragEle>
    </DragBox>
复制代码

参数	说明	类型	默认值
className	样式	string	null

在线演示demo ====================> 在线demo

保持更新，bug请留言。

前往git