extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-01-24 07:09:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

adding drag and drop styles

Browse Source 
Add functions required for adding styles to imageTaskContainer to show where images will be dropped.
This commit is contained in:
AssassinJN 2022-12-19 13:45:42 -05:00 committed by GitHub
parent e1875c872c
commit 54f9e9bfe9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/media/js/main.js
View File

@ -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) {
</div>`
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;
})