From e1875c872c615421b2ca9647d117e7e61a2d33d6 Mon Sep 17 00:00:00 2001 From: AssassinJN Date: Mon, 19 Dec 2022 13:44:15 -0500 Subject: [PATCH 1/3] classes for drag and drop Added classes for drag and drop. --- ui/media/css/main.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 1c624934..cef6f669 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -405,6 +405,22 @@ img { .imageTaskContainer > div > .collapsible-handle { display: none; } +.dropTargetBefore::before{ + content: ""; + border: 1px solid #fff; + margin-bottom: -2px; + display: block; + box-shadow: 0 0 5px #fff; + transform: translate(0px, -14px); +} +.dropTargetAfter::after{ + content: ""; + border: 1px solid #fff; + margin-bottom: -2px; + display: block; + box-shadow: 0 0 5px #fff; + transform: translate(0px, 14px); +} .drag-handle { margin-right: 6px; cursor: move; From 54f9e9bfe9baf15aca64b605ac9b7fc4e1b97c96 Mon Sep 17 00:00:00 2001 From: AssassinJN Date: Mon, 19 Dec 2022 13:45:42 -0500 Subject: [PATCH 2/3] adding drag and drop styles Add functions required for adding styles to imageTaskContainer to show where images will be dropped. --- ui/media/js/main.js | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 7cb2d73c..09204624 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -104,6 +104,31 @@ imagePreview.addEventListener('drop', function(ev) { } }) +let startX, startY; +imagePreview.addEventListener("dragover", (event) => { + imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { + if(itc != event.target.closest(".imageTaskContainer")){ + itc.classList.remove('dropTargetBefore','dropTargetAfter'); + } + }); + if(event.target.closest(".imageTaskContainer")){ + if(startX && startY){ + console.log('x: '+startX+" : "+event.target.closest(".imageTaskContainer").offsetLeft); + console.log('y: '+startY+" : "+event.target.closest(".imageTaskContainer").offsetTop); + if(event.target.closest(".imageTaskContainer").offsetTop > startY){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); + }else if(event.target.closest(".imageTaskContainer").offsetTop < startY){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); + }else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); + }else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); + } + } + } +}); + + let showConfigToggle = document.querySelector('#configToggleBtn') // let configBox = document.querySelector('#config') // let outputMsg = document.querySelector('#outputMsg') @@ -803,12 +828,20 @@ function createTask(task) { ` createCollapsibles(taskEntry) + let draghandle = taskEntry.querySelector('.drag-handle') draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)}) draghandle.addEventListener('mouseup', (e) => { taskEntry.setAttribute('draggable',false)}) - taskEntry.addEventListener('dragend', (e) => { taskEntry.setAttribute('draggable',false)}) + taskEntry.addEventListener('dragend', (e) => { + taskEntry.setAttribute('draggable',false); + imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { + itc.classList.remove('dropTargetBefore','dropTargetAfter'); + }); + }) taskEntry.addEventListener('dragstart', function(e) { e.dataTransfer.setData("text/plain", taskEntry.id); + startX = e.target.closest(".imageTaskContainer").offsetLeft; + startY = e.target.closest(".imageTaskContainer").offsetTop; }) From e47e54de3f513baca312cea993c6f4205a4df905 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 19 Dec 2022 20:34:06 +0100 Subject: [PATCH 3/3] Only activate the dragOver event listener when dragging tasks --- ui/media/js/main.js | 47 +++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 09204624..e903632b 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -104,29 +104,6 @@ imagePreview.addEventListener('drop', function(ev) { } }) -let startX, startY; -imagePreview.addEventListener("dragover", (event) => { - imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { - if(itc != event.target.closest(".imageTaskContainer")){ - itc.classList.remove('dropTargetBefore','dropTargetAfter'); - } - }); - if(event.target.closest(".imageTaskContainer")){ - if(startX && startY){ - console.log('x: '+startX+" : "+event.target.closest(".imageTaskContainer").offsetLeft); - console.log('y: '+startY+" : "+event.target.closest(".imageTaskContainer").offsetTop); - if(event.target.closest(".imageTaskContainer").offsetTop > startY){ - event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); - }else if(event.target.closest(".imageTaskContainer").offsetTop < startY){ - event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); - }else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){ - event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); - }else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){ - event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); - } - } - } -}); let showConfigToggle = document.querySelector('#configToggleBtn') @@ -781,6 +758,28 @@ function createInitImageHover(taskEntry) { $tooltip.find('button').on('click', (e) => { onUseAsInputClick(null,img) } ) } +let startX, startY; +function onTaskEntryDragOver(event) { + imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { + if(itc != event.target.closest(".imageTaskContainer")){ + itc.classList.remove('dropTargetBefore','dropTargetAfter'); + } + }); + if(event.target.closest(".imageTaskContainer")){ + if(startX && startY){ + if(event.target.closest(".imageTaskContainer").offsetTop > startY){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); + }else if(event.target.closest(".imageTaskContainer").offsetTop < startY){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); + }else if (event.target.closest(".imageTaskContainer").offsetLeft > startX){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetAfter'); + }else if (event.target.closest(".imageTaskContainer").offsetLeft < startX){ + event.target.closest(".imageTaskContainer").classList.add('dropTargetBefore'); + } + } + } +} + function createTask(task) { let taskConfig = '' @@ -837,8 +836,10 @@ function createTask(task) { imagePreview.querySelectorAll(".imageTaskContainer").forEach(itc => { itc.classList.remove('dropTargetBefore','dropTargetAfter'); }); + imagePreview.removeEventListener("dragover", onTaskEntryDragOver ); }) taskEntry.addEventListener('dragstart', function(e) { + imagePreview.addEventListener("dragover", onTaskEntryDragOver ); e.dataTransfer.setData("text/plain", taskEntry.id); startX = e.target.closest(".imageTaskContainer").offsetLeft; startY = e.target.closest(".imageTaskContainer").offsetTop;