Merge pull request #675 from JeLuF/drag

Add drag handle

ui/media/css/main.css

@@ -265,7 +265,7 @@ img {
 }
 .preview-prompt {
     font-size: 13pt;
-    margin-bottom: 10pt;
+    display: inline;
 }
 #coffeeButton {
     height: 23px;
@@ -391,14 +391,18 @@ img {
 .imageTaskContainer > div > .collapsible-handle {
     display: none;
 }
+.drag-handle {
+    margin-right: 6px;
+    cursor: move;
+}
 .taskStatusLabel {
-    float: left;
     font-size: 8pt;
     background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
     margin-right: 5pt;
+    display: inline;
 }
 .activeTaskLabel {
     background:rgb(0, 90, 30);
@@ -448,6 +452,7 @@ img {
     font-size: 10pt;
     color: #aaa;
     margin-bottom: 5pt;
+    margin-top: 5pt;
 }
 .img-batch {
     display: inline;

ui/media/js/main.js

@@ -783,6 +783,7 @@ function createTask(task) {
     taskEntry.id = `imageTaskContainer-${Date.now()}`
     taskEntry.className = 'imageTaskContainer'
     taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
+                                <i class="drag-handle fa-solid fa-grip"></i>
                                 <div class="taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
                                 <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
@@ -796,6 +797,13 @@ 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('dragstart', function(e) {
+        e.dataTransfer.setData("text/plain", taskEntry.id);
+    })
 
 
     if (task.reqBody.init_image !== undefined) {
@@ -829,24 +837,13 @@ function createTask(task) {
 
     task.isProcessing = true
     taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
-    taskEntry.draggable = true
     htmlTaskMap.set(taskEntry, task)
-    taskEntry.addEventListener('dragstart', function(ev) {
-        ev.dataTransfer.setData("text/plain", ev.target.id);
-    })
 
     task.previewPrompt.innerText = task.reqBody.prompt
     if (task.previewPrompt.innerText.trim() === '') {
         task.previewPrompt.innerHTML = '&nbsp;' // allows the results to be collapsed
     }
 
-    // Allow prompt text to be selected.
-    task.previewPrompt.addEventListener("mouseover", function() {
-        taskEntry.setAttribute("draggable", "false");
-    });
-    task.previewPrompt.addEventListener("mouseout", function() {
-        taskEntry.setAttribute("draggable", "true");
-    });
 }
 
 function getCurrentUserRequest() {