Problem description: By default, vue-grid-layoutthe page scroll bar does not scroll with the card when moving the card to the bottom of the page.
problem solved:
In the grid-itemevent move, get the currently moving element and use scrollIntoViewthe method to implement the scroll bar following.
code show as below:
const moveEvent = (i: any) => {
let cIdx = layout.value.findIndex(item => item.i === i)
let el = gridItemRefs.value[cIdx].$el
setTimeout(() => {
el?.scrollIntoView({
behavior: "smooth", block: "end" })
}, 300)
}
At this time, the optimization effect is as follows:
- However, there is a small problem with the above optimization. Moving the card to the right can be invalid and infinitely moved to the right. So control it
according to the element :lastX
const moveEvent = (i: any) => {
let cIdx = layout.value.findIndex(item => item.i === i)
let el = gridItemRefs.value[cIdx].$el
setTimeout(() => {
console.log(gridItemRefs.value[cIdx].lastX, '===gridItemRefs.value[cIdx]');
if (gridItemRefs.value[cIdx].lastX < 900) {
el?.scrollIntoView({
behavior: "smooth", block: "end" })
}
}, 300)
}
In the same way, if you drag an element from the outer layer, you can also use it scrollIntoViewto set the scroll bar to follow.
code show as below:
const colNum = 12
const drag = (item: any) => {
let parentRect = document.getElementById('content')?.getBoundingClientRect()!;
let mouseInGrid = false;
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
mouseInGrid = true;
}
if (mouseInGrid === true && (layout.value.findIndex(item => item.i === 'drop')) === -1) {
layout.value.push({
x: (layout.value.length * 2) % (colNum || 12),
y: layout.value.length + (colNum || 12), // puts it at the bottom
w: item.w,
h: item.h,
i: 'drop',
});
}
let index = layout.value.findIndex(item => item.i === 'drop');
if (index !== -1) {
try {
gridItemRefs.value[layout.value.length - 1].$refs.item.style.display = "none";
} catch {
}
let el = gridItemRefs.value[index];
if (el) {
setTimeout(() => {
el.$el?.scrollIntoView({
behavior: "smooth", block: "nearest" })
}, 300)
el.dragging = {
"top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left };
let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);
if (mouseInGrid === true) {
gridlayout.value.dragEvent('dragstart', 'drop', new_pos.x || 0, new_pos.y || 0, item.h, item.w);
// dragEvent('dragstart', 'drop', new_pos.x || 0, new_pos.y || 0, defaultH, defaultW);
DragPos.i = String(new Date().getTime());
DragPos.x = layout.value[index].x;
DragPos.y = layout.value[index].y;
DragPos.w = layout.value[index].w;
DragPos.h = layout.value[index].h;
}
if (mouseInGrid === false) {
gridlayout.value.dragEvent('dragend', 'drop', new_pos.x || 0, new_pos.y || 0, item.h, item.w);
// dragEvent('dragend', 'drop', new_pos.x || 0, new_pos.y || 0, defaultH, defaultW);
layout.value = layout.value.filter(obj => obj.i !== 'drop');
}
}
}
}
const dragend = () => {
let parentRect = document.getElementById('content')?.getBoundingClientRect()!;
let mouseInGrid = false;
if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
mouseInGrid = true;
}
if (mouseInGrid === true) {
gridlayout.value.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, DragPos.h, DragPos.w);
let delIndex = layout.value.findIndex(item => item.i === 'drop')
layout.value.splice(delIndex, 1)
// UNCOMMENT below if you want to add a grid-item
layout.value.push({
x: DragPos.x,
y: DragPos.y,
w: DragPos.w,
h: DragPos.h,
i: DragPos.i,
});
gridlayout.value.dragEvent('dragend', DragPos.i, DragPos.x, DragPos.y, DragPos.h, DragPos.w);
try {
gridItemRefs.value[layout.value.length - 1].$refs.item.style.display = "block";
} catch {
}
}
}