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