React简单的可拖拽组件

“ 简单的可拖拽的react组件, 不依赖任何第三方的库 ”

解决什么问题?

需求来源: [项目地址](https://github.com/marspal/simple-react-draggable)

来源于运营同窗的需求, 在用[antd](https://github.com/ant-design/ant-design)的select组件时, mode:multiple时, 选中的tag不能排序; 有时须要对选中的数据执行调整顺序时, 须要删掉数据,而后在添加数据; 因为有时候tag太多, 使得对这些tag排序成为提升工做效率的迫切要求; 因为Select组件不支持排序、折中的方案是设计一个组件支持排序，而后把数据同步到Select组件;

option: (可选)

- offsetX: 每个item的左右间隔距离

- offsetY: 每个item的上下间隔距离

- width: 每个item的宽度

- height: 每个item的高度

- defaultOption:

const defaultOption = {  width: 50,   height: 20,  offsetX: 3,  offsetY: 3};复制代码

itemClassName: 每个item的样式

.draggable-item {   
     background: #f3f3f3;
     border-radius: 4px;
     overflow: hidden;
     cursor: default;
     font-size: 12px;
     color: rgba(0,0,0,0.65);
     text-align: center;
}复制代码

className: container元素的样式

.wrapper {    
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d9d9d9; 
    box-sizing: border-box;
    padding: 0;    
    margin: 0;
}复制代码

list: [{id,name}]

onMove: 提升监听的事件, 返回拖拽后的数据

实现思路

找到要移动的数据的index和目标位置的元素的index, but how?

每个item元素bind onDragStart监听事件; 并记录每一个元素的index(代码为position); 这一步获取移动数据的index

list.forEach((item,index) => {      items.push(        <div key={item.id}          onDragStart = {(event) => this.onDragStart(event, index)}          draggable          style={{marginTop: offsetY, marginLeft: offsetX, width, height, lineHeight: height+'px'}}          className={itemCls}        >          {item.name}        </div>      );    })复制代码

获取目标位置元素的index: 容器中监听onDrop事件, 使用onDragOver防止事件冒泡; onDrap事件实现:

onDrop = (event) => {    let {list} = this.state,        position = event.dataTransfer.getData("position"), // 移动元素位置        targetIndex = this.calculateTargetIndex(event.target),        removeItem;    let {onMove} = this.props;    if(targetIndex !== -1){      removeItem = list.splice(position, 1)[0];      list.splice(targetIndex, 0, removeItem);      this.setState({list});      onMove && onMove(list)    }  }复制代码

在React计算物理位置:

1). 计算拖拽容器的x,y,以及每一行能显示多少移动元素

calculateDragContainer(){    let { option: {offsetX, width} } = this.state;    let c = ReactDOM.findDOMNode(this.refs.draggableContainer).getBoundingClientRect(),        col = parseInt((c.width - offsetX) / (width + offsetX));    return {      x: c.x,      y: c.y,      col    }  }复制代码

2). 计算item元素的x,y

calculateDragItem(target){    var t = ReactDOM.findDOMNode(target).getBoundingClientRect();    return {x: t.x, y: t.y}  }复制代码

3). 计算每个list中的i数据的行列值

calculateIndexRowCol(i, maxCol) { // index row col    let row, col;    row = Math.ceil(i / maxCol);    col = i % maxCol;    if(col === 0) {      col = maxCol;    }    return {row, col};  }复制代码

4). 计算目标位置的list元素的index

calculateTargetIndex(target){// 获取目标元素的index    let { list, option: {width, height, offsetX, offsetY} } = this.state,        c = this.calculateDragContainer(),        t = this.calculateDragItem(target),        targetIndex = -1,targetX,targetY, i,        len = list.length;    if(t.x !== c.x && list.length > 0){ // 鼠标落在目标item上      for(i = 1; i <= len; ++i){        let {row, col} = this.calculateIndexRowCol(i, c.col);            targetX = ((col - 1) * width + col * offsetX) + c.x;            targetY = ((row - 1) * height + row * offsetY) + c.y;        if(targetX === t.x && targetY === t.y){          targetIndex = i - 1;          break;         }      }    }    return targetIndex;  }复制代码