Descripción del problema: de forma predeterminada, vue-grid-layoutla barra de desplazamiento de la página no se desplaza con la tarjeta cuando se mueve la tarjeta al final de la página.
problema resuelto:
En el grid-itemcaso move, obtenga el elemento en movimiento actualmente y use scrollIntoViewel método para implementar la siguiente barra de desplazamiento.
El código se muestra a continuación:
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)
}
En este momento, el efecto de optimización es el siguiente:
- Sin embargo, hay un pequeño problema con la optimización anterior: mover la tarjeta hacia la derecha puede no ser válido y moverse infinitamente hacia la derecha. Así que contrólalo
según el elemento :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)
}
De la misma manera, si arrastra un elemento desde la capa exterior, también puede usarlo scrollIntoViewpara configurar la barra de desplazamiento a seguir.
El código se muestra a continuación:
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 {
}
}
}