1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | 3× 3× 3× 3× 6× 6× 6× 6× 3× 3× 3× 3× 1× 3× 1× 1× 1× 1× 1× 1× 1× 6× 15× 15× 15× 5× 10× 15× 1× 1× | import React from 'react'; import DragCore from './core.js'; export default class DragMe extends React.Component { constructor(props) { super(props); this.state = { dragList: {}, dragContainerStyle : { minHeight: this.props.minHeight, height: this.props.height } }; let _this = this; this.props.dragList.forEach(function(e){ let tempDragEle = _this.state.dragList[e.key] = e; tempDragEle.isDragging = false; tempDragEle.transform = 'translate(' + tempDragEle.x + 'px' + ',' + tempDragEle.y + 'px)' tempDragEle.draggable ? (tempDragEle.zIndex = 9999,tempDragEle.cursor = "pointer") : tempDragEle.zIndex = 999 }); this.handleMouseDown = this.handleMouseDown.bind(this); this.handleMouseMove = this.handleMouseMove.bind(this); this.handleMouseUp = this.handleMouseUp.bind(this); this.handleMouseLeave = this.handleMouseLeave.bind(this); } //限制可拖拽边界,返回有效坐标 getValidCoordinate(target, x, y) { //边界宽度和高度 let areaWidth = target.parentNode.clientWidth; let areaHeight = target.parentNode.clientHeight; //拖曳元素宽度和高度 let dragElementWidth = target.clientWidth; let dragElementHeight = target.clientHeight; if(x < 0) { x = 0 } if(y < 0) { y = 0; } if(x >= (areaWidth-dragElementWidth)) { x = (areaWidth-dragElementWidth) } if(y >= (areaHeight-dragElementHeight)) { y = (areaHeight-dragElementHeight) } return { validX: x, validY: y } } handleMouseDown(event, key) { for(var i in this.state.dragList) { this.state.dragList[i].draggable ? this.state.dragList[i].zIndex = 9999 : null; } this.state.dragList[key] = Object.assign(this.state.dragList[key], { position: "absolute", isDragging: true, //记录鼠标按下时鼠标点击位置距离拖动元素左侧和顶部边框的距离 oX: event.clientX - event.currentTarget.offsetLeft, oY: event.clientY - event.currentTarget.offsetTop, //oldX: event.clientX, //oldY: event.clientY, zIndex: 999999 }) this.setState({ dragList: this.state.dragList }) } handleMouseMove(event, key) { Iif(this.state.dragList[key].isDragging){ let currentX = event.clientX - this.state.dragList[key].oX; let currentY = event.clientY - this.state.dragList[key].oY; let { validX, validY } = this.getValidCoordinate(event.currentTarget, currentX, currentY); this.state.dragList[key] = Object.assign(this.state.dragList[key], { isDragging: true, x: validX + 'px', y: validY + 'px'//, //transform: 'translate(' + (event.clientX-this.state.dragList[key].oldX) + 'px' + ',' + (event.clientY-this.state.dragList[key].oldY) + 'px)', //oldX: event.clientX, //oldY: event.clientY }) this.setState({ dragList: this.state.dragList }) } } handleMouseUp(event, key) { this.state.dragList[key] = Object.assign(this.state.dragList[key], { isDragging: false }) this.setState({ dragList: this.state.dragList }) } handleMouseLeave(event, key) { this.state.dragList[key] = Object.assign(this.state.dragList[key], { isDragging: false }) this.setState({ dragList: this.state.dragList }) } render() { return ( <DragCore dragContainerStyle={ this.state.dragContainerStyle }> { React.Children.map(this.props.children, (child,index) => { let draggable = this.state.dragList[index+1 +""].draggable; let cloneAddProps = null; if(draggable) { cloneAddProps = { //把父组件的props.name赋值给每个子组件 // name: props.name dragInfo: this.state.dragList[index+1+""], handleMouseDown: this.handleMouseDown, handleMouseMove: this.handleMouseMove, handleMouseUp: this.handleMouseUp, handleMouseLeave: this.handleMouseLeave } } else { cloneAddProps = { dragInfo: this.state.dragList[index+1+""], } } return React.cloneElement(child, cloneAddProps) }) } </DragCore> ); } } DragMe.propTypes = { dragList: React.PropTypes.array, minHeight: React.PropTypes.string, height: React.PropTypes.string, }; DragMe.defaultProps = { dragList: [], minHeight: "600px", height: "600px", }; |