Skip to content

S
submodule
Commit 40dbd9f1 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改拖拽排序

parent 23dac15b
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 51 deletions
components/apolloTable/component/DragSorted.tsx
View file @ 40dbd9f1
......@@ -20,8 +20,14 @@ const DragSorted = (props: any) => {
if (!canSorted || position === 'left' || position === 'right') {
return <div className={s.sortedWrap}>{props.children}</div>;
}
// 长按计时器
const timer: any = useRef(null);
// 按下鼠标
const pressed: any = useRef(false);
// copyDiv显示
const copyDivShow: any = useRef(false);
// 拖动列
const dragCol: any = useRef();
// 放置列
const dropCol: any = useRef();
// 表格滚动计时器
const timerInterval: any = useRef(null);
// 表格
......@@ -37,6 +43,15 @@ const DragSorted = (props: any) => {
const rightFixedHandleWrap: any = document.querySelector('#rightFixedHandleWrap');
// 监听鼠标移动
const onMouseMove = useCallback((e) => {
if (!pressed.current) {
// 移除全局事件
document.body.removeEventListener('mousemove', onMouseMove, false);
document.body.removeEventListener('mouseup', onMouseUp, false);
return;
}
if (!copyDivShow.current) {
initCopyDiv(e);
}
const tableRect = container.getBoundingClientRect();
const detaX = columnCopyDiv.getAttribute('data-deta-x');
// 所有列
......@@ -70,8 +85,10 @@ const DragSorted = (props: any) => {
// 收集投放目标的信息
const dropColumn = dom.getAttribute('data-column-name') || '';
const dropColumnOrder = dom.getAttribute('data-column-order') || '';
divider.setAttribute('data-drop-column', dropColumn);
divider.setAttribute('data-drop-order', dropColumnOrder);
dropCol.current = {
columnName: dropColumn,
orderNo: dropColumnOrder,
};
}
});
......@@ -114,26 +131,13 @@ const DragSorted = (props: any) => {
}, []);
// 监听鼠标抬起
const onMouseUp = useCallback(() => {
// 清空计时器
if (timer.current) {
clearTimeout(timer.current);
timer.current = null;
}
if (timerInterval.current) {
clearInterval(timerInterval.current);
timerInterval.current = null;
}
// 移除全局事件
document.body.removeEventListener('mousemove', onMouseMove, false);
document.body.removeEventListener('mouseup', onMouseUp, false);
// 停止拖动时隐藏影子div
columnCopyDiv.style.display = 'none';
dividerWrap.style.display = 'none';
// 获取分割线上挂载的拖动列和投放列信息
const dragColumn = divider.getAttribute('data-drag-column');
const dragColumnOrder = divider.getAttribute('data-drag-order');
const dropColumn = divider.getAttribute('data-drop-column');
const dropColumnOrder = divider.getAttribute('data-drop-order');
const dragColumn = dragCol.current && dragCol.current.columnName;
const dragColumnOrder = dragCol.current && dragCol.current.orderNo;
const dropColumn = dropCol.current && dropCol.current.columnName;
const dropColumnOrder = dropCol.current && dropCol.current.orderNo;
// 清理操作
clean();
// 没有列信息
if (!dragColumn || !dropColumn) {
return;
......@@ -215,40 +219,62 @@ const DragSorted = (props: any) => {
if (e.button !== 0) {
return;
}
// 鼠标按下标记
pressed.current = true;
// 记录拖动列
dragCol.current = {
columnName,
orderNo,
};
// 全局添加监听鼠标移动和松开事件
document.body.addEventListener('mousemove', onMouseMove, false);
document.body.addEventListener('mouseup', onMouseUp, false);
},
[onMouseMove, onMouseUp],
);
// 初始化影子div位置
const initCopyDiv = useCallback(
(e) => {
// 表格初始位置x点
const originLeft = container.getBoundingClientRect().x || 0;
// 拖动列矩形
const targetRect = e.currentTarget.getBoundingClientRect();
const targetRect = e.target.offsetParent.getBoundingClientRect();
const curX = e.clientX;
// 500ms长按事件，表示想要拖拽
timer.current = setTimeout(() => {
// 影子div显示
columnCopyDiv.style.display = 'block';
// 影子div初始x位置=拖动列x点-表格x点
columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
// 影子div宽度=拖动列宽度
columnCopyDiv.style.width = `${targetRect.width}px`;
columnCopyDiv.innerText = columnChsName;
// 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
const detaX = curX - targetRect.x;
columnCopyDiv.setAttribute('data-deta-x', String(detaX));
// 分割线初始位置为当前列
divider.style.left = `${targetRect.x - originLeft}px`;
dividerWrap.style.display = 'block';
// 给分割线设置拖动列信息，移除投放列信息
divider.setAttribute('data-drag-column', columnName);
divider.setAttribute('data-drag-order', orderNo);
divider.removeAttribute('data-drop-column');
divider.removeAttribute('data-drop-order');
// 全局添加监听鼠标移动和松开事件
document.body.addEventListener('mousemove', onMouseMove, false);
document.body.addEventListener('mouseup', onMouseUp, false);
}, 500);
// 阻止默认行为
e.preventDefault();
// 影子div显示
columnCopyDiv.style.display = 'block';
// 影子div初始x位置=拖动列x点-表格x点
columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
// 影子div宽度=拖动列宽度
columnCopyDiv.style.width = `${targetRect.width}px`;
columnCopyDiv.innerText = columnChsName;
// 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
const detaX = curX - targetRect.x;
columnCopyDiv.setAttribute('data-deta-x', String(detaX));
// 分割线初始位置为当前列
divider.style.left = `${targetRect.x - originLeft}px`;
dividerWrap.style.display = 'block';
copyDivShow.current = true;
},
[columnName, orderNo, onMouseMove, onMouseUp],
[columnName, orderNo],
);
const clean = useCallback(() => {
// 鼠标松开
pressed.current = false;
// 清空计时器
if (timerInterval.current) {
clearInterval(timerInterval.current);
timerInterval.current = null;
}
// 移除全局事件
document.body.removeEventListener('mousemove', onMouseMove, false);
document.body.removeEventListener('mouseup', onMouseUp, false);
// 停止拖动时隐藏影子div
columnCopyDiv.style.display = 'none';
dividerWrap.style.display = 'none';
copyDivShow.current = false;
dragCol.current = null;
dropCol.current = null;
}, [onMouseMove, onMouseUp]);
return (
<div
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment