98 lines
3.6 KiB
JavaScript
98 lines
3.6 KiB
JavaScript
|
|
|||
|
|
import dragula from 'react-dragula';
|
|||
|
|
import isFunction from 'lodash/isFunction';
|
|||
|
|
import findIndex from 'lodash/findIndex';
|
|||
|
|
|
|||
|
|
class WeaPrjDragula extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.drake = null;
|
|||
|
|
}
|
|||
|
|
componentDidMount() {
|
|||
|
|
this.initDragula();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillUnmount() {
|
|||
|
|
this.drake && this.drake.destroy();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
return this.props.children;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initDragula = () => {
|
|||
|
|
let {container,canDrag, onDrop, getKeyFromDom, getKeyFromData} = this.props;
|
|||
|
|
if (typeof(container) == "string") {
|
|||
|
|
container = jQuery(container, ReactDOM.findDOMNode(this))[0];
|
|||
|
|
} else if (isFunction(container)) {
|
|||
|
|
container = container();
|
|||
|
|
}
|
|||
|
|
this.drake = dragula([container], {
|
|||
|
|
isContainer: function (el) {
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
moves: (el, source, handle, sibling) => {
|
|||
|
|
return isFunction(canDrag) ? canDrag(handle, el, source, sibling) : canDrag;
|
|||
|
|
},
|
|||
|
|
mirrorContainer: container
|
|||
|
|
});
|
|||
|
|
this.drake.on("drop",(el, target, source, sibling) => {
|
|||
|
|
|
|||
|
|
let {datas} = this.props;
|
|||
|
|
if (Array.isArray(datas) && isFunction(getKeyFromDom) && isFunction(getKeyFromData) && isFunction(onDrop)) {
|
|||
|
|
let dataKey = getKeyFromDom(el), downKey = sibling ? getKeyFromDom(sibling) : -1;
|
|||
|
|
if (downKey == dataKey) {
|
|||
|
|
downKey = -1;
|
|||
|
|
}
|
|||
|
|
let dataIdx = findIndex(datas, (data) => getKeyFromData(data) == dataKey);
|
|||
|
|
let downIdx = downKey == -1 ? datas.length : findIndex(datas, (data) => getKeyFromData(data) == downKey);
|
|||
|
|
downIdx = downIdx > dataIdx ? downIdx - 1 : downIdx;
|
|||
|
|
let data = datas.splice(dataIdx, 1)[0];
|
|||
|
|
datas.splice(downIdx, 0, data);
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
// 遍历并返回新的数据
|
|||
|
|
let curData = null;
|
|||
|
|
datas = datas.map((data, index) => {
|
|||
|
|
if (this.getRowKey(data) == key) {
|
|||
|
|
dataIdx = index;
|
|||
|
|
curData = data;
|
|||
|
|
}
|
|||
|
|
if (downKey !== -1 && downKey == this.getRowKey(data)) {
|
|||
|
|
downIdx = dataIdx >= 0 ? index - 1 : index;
|
|||
|
|
}
|
|||
|
|
if (dataIdx == -1 && downIdx == -1) {
|
|||
|
|
// 当前与放置的index都没找到，说明未到影响区
|
|||
|
|
return data;
|
|||
|
|
} else if (dataIdx >=0 && downIdx == -1) {
|
|||
|
|
// 找到当前的但没有找到放置位置，需要将下方数据上移一位
|
|||
|
|
return index == datas.length - 1 ? datas[dataIdx] : datas[index + 1];
|
|||
|
|
} else if (dataIdx == -1 && downIdx >=0) {
|
|||
|
|
// 找到放置位置但没有找到当前的，需要将上方数据下移一位
|
|||
|
|
return downIdx == index ? null : datas[index - 1];
|
|||
|
|
} else {
|
|||
|
|
// 都找到之后，如果相等，则做下特殊处理，如果不等，说明已过影响区
|
|||
|
|
return index == downIdx ? curData : index == dataIdx ? datas[index - 1] : data;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 处理放置位置的数据。
|
|||
|
|
datas[downIdx] = curData;*/
|
|||
|
|
onDrop(datas, dataIdx, downIdx);
|
|||
|
|
} else {
|
|||
|
|
isFunction(onDrop) && onDrop(el, sibling, target, source);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
WeaPrjDragula.propTypes = {
|
|||
|
|
container: React.PropTypes.any,//可拖拽区域
|
|||
|
|
canDrag: React.PropTypes.any,//是否可拖拽，可以传方法，方法的传参为当前点击的节点。
|
|||
|
|
onDrop: React.PropTypes.func,//拖拽结束时触发的方法，第1个参数是拖拽的DOM节点，第二个参数是所放下的位置下方的DOM节点。
|
|||
|
|
datas: React.PropTypes.array,//数组
|
|||
|
|
getKeyFromData: React.PropTypes.func,//从数组中获得key的方法。
|
|||
|
|
getKeyFromDom: React.PropTypes.func,//从Dom中获得key的方法
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default WeaPrjDragula;
|