mirror/php-adminer
1
0
Fork 0
mirror of https://github.com/vrana/adminer.git synced 2025-08-30 17:50:00 +02:00
Code Issues Releases Wiki Activity

Support drag-n-drop moving on touch screens

Browse Source
This commit is contained in:
Peter Knut
2024-10-24 22:13:22 +02:00
parent fc2e025603
commit f61cf1ba0c
1 changed files with 86 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
adminer/static/functions.js
View File

@@ -572,11 +572,17 @@ function selectSearchSearch() {
row.classList.remove("no-sort"); row.classList.remove("no-sort");
const handle = qs(".handle", row); const handle = qs(".handle", row);
handle.addEventListener("mousedown", (event) => { handle.addEventListener("mousedown", (event) => { startSorting(row, event) });
handle.addEventListener("touchstart", (event) => { startSorting(row, event) });
};
function startSorting(row, event) {
event.preventDefault(); event.preventDefault();
const pointerY = getPointerY(event);
const parent = row.parentNode; const parent = row.parentNode;
startY = event.clientY - getOffsetTop(row); startY = pointerY - getOffsetTop(row);
minY = getOffsetTop(parent); minY = getOffsetTop(parent);
maxY = minY + parent.offsetHeight - row.offsetHeight; maxY = minY + parent.offsetHeight - row.offsetHeight;
@@ -586,7 +592,7 @@ function selectSearchSearch() {
nextRow = row.nextElementSibling; nextRow = row.nextElementSibling;
let top = event.clientY - startY; let top = pointerY - startY;
let left = getOffsetLeft(row); let left = getOffsetLeft(row);
let width = row.getBoundingClientRect().width; let width = row.getBoundingClientRect().width;
@@ -618,23 +624,17 @@ function selectSearchSearch() {
document.body.appendChild(dragHelper); document.body.appendChild(dragHelper);
window.addEventListener("mousemove", updateSorting); window.addEventListener("mousemove", updateSorting);
window.addEventListener("touchmove", updateSorting);
window.addEventListener("mouseup", () => { window.addEventListener("mouseup", finishSorting);
dragHelper.classList.remove("dragging"); window.addEventListener("touchend", finishSorting);
dragHelper.style.top = null; window.addEventListener("touchcancel", finishSorting);
dragHelper.style.left = null; }
dragHelper.style.width = null;
parent.insertBefore(dragHelper.tagName === "TABLE" ? dragHelper.firstChild : dragHelper, placeholderRow);
placeholderRow.remove();
window.removeEventListener("mousemove", updateSorting);
}, { once: true });
});
};
function updateSorting(event) { function updateSorting(event) {
let top = Math.min(Math.max(event.clientY - startY, minY), maxY); const pointerY = getPointerY(event);
let top = Math.min(Math.max(pointerY - startY, minY), maxY);
dragHelper.style.top = `${top}px`; dragHelper.style.top = `${top}px`;
const parent = placeholderRow.parentNode; const parent = placeholderRow.parentNode;
@@ -660,6 +660,32 @@ function selectSearchSearch() {
} }
} }
} }
function finishSorting() {
dragHelper.classList.remove("dragging");
dragHelper.style.top = null;
dragHelper.style.left = null;
dragHelper.style.width = null;
placeholderRow.parentNode.insertBefore(dragHelper.tagName === "TABLE" ? dragHelper.firstChild : dragHelper, placeholderRow);
placeholderRow.remove();
window.removeEventListener("mousemove", updateSorting);
window.removeEventListener("touchmove", updateSorting);
window.removeEventListener("mouseup", finishSorting);
window.removeEventListener("touchend", finishSorting);
window.removeEventListener("touchcancel", finishSorting);
}
function getPointerY(event) {
if (event.type.includes("touch")) {
const touch = event.touches[0] || event.changedTouches[0];
return touch.clientY;
} else {
return event.clientY;
}
}
})(); })();