From e7715f530a25cd923581dfbbb847e22793f5cde3 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Sun, 22 Sep 2024 19:14:07 +0800 Subject: refactor: logic about overlap of draggable block --- src/Layout.mjs | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/Layout.mjs b/src/Layout.mjs index 789027b..d0fde0f 100644 --- a/src/Layout.mjs +++ b/src/Layout.mjs @@ -59,6 +59,13 @@ export class Overlay extends Layout { } addDraggable = (element) => { + // Make sure current element always on top + const siblings = Array.from(element.parentElement?.querySelectorAll(':scope > *') ?? []) + element.onmouseover = () => { + siblings.forEach(e => e.style.removeProperty('z-index')) + element.style.zIndex = '9000' + } + // Add draggable part const draggablePart = document.createElement('div') element.appendChild(draggablePart) @@ -83,18 +90,14 @@ export class Overlay extends Layout { // FIXME use pure CSS to hide utils const utils = element.querySelector('.utils') - const siblings = Array.from(element.parentElement.querySelectorAll(':scope > *')) draggable.onDragStart = () => { - utils.style.opacity = 0 + utils.style.display = 'none' element.classList.add('drag') - // Remove z-index from previous dragged - siblings.forEach(e => e.style.removeProperty('z-index')) } draggable.onDragEnd = () => { utils.style = '' element.classList.remove('drag') - // Ensuer last dragged block always on top element.style.zIndex = '9000' } -- cgit v1.2.3-70-g09d2