fix: 테이블 리사이저 드래그 시 이웃 컬럼 영향 없이 단방향(드래그 방향)으로만 너비가 바뀌도록 개선
This commit is contained in:
@@ -709,11 +709,19 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
|
|
||||||
let startX = 0;
|
let startX = 0;
|
||||||
let startWidth = 0;
|
let startWidth = 0;
|
||||||
|
let startTableWidth = 0;
|
||||||
|
|
||||||
const onMouseMove = (e: MouseEvent) => {
|
const onMouseMove = (e: MouseEvent) => {
|
||||||
const dx = e.clientX - startX;
|
const dx = e.clientX - startX;
|
||||||
const newWidth = Math.max(50, startWidth + dx);
|
const newWidth = Math.max(50, startWidth + dx);
|
||||||
|
|
||||||
|
// Update the width of the dragged column
|
||||||
th.style.width = `${newWidth}px`;
|
th.style.width = `${newWidth}px`;
|
||||||
|
|
||||||
|
// Dynamically adjust the total table width by the delta change,
|
||||||
|
// preventing neighboring columns from shrinking or expanding.
|
||||||
|
const deltaW = newWidth - startWidth;
|
||||||
|
tableElement.style.width = `${startTableWidth + deltaW}px`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onMouseUp = () => {
|
const onMouseUp = () => {
|
||||||
@@ -729,6 +737,9 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
|
|||||||
|
|
||||||
startX = e.clientX;
|
startX = e.clientX;
|
||||||
startWidth = th.offsetWidth;
|
startWidth = th.offsetWidth;
|
||||||
|
|
||||||
|
// Capture the initial physical width of the entire table
|
||||||
|
startTableWidth = tableElement.offsetWidth;
|
||||||
|
|
||||||
resizer.classList.add('resizing');
|
resizer.classList.add('resizing');
|
||||||
document.addEventListener('mousemove', onMouseMove);
|
document.addEventListener('mousemove', onMouseMove);
|
||||||
|
|||||||
Reference in New Issue
Block a user