Much closer

public/index.html

@@ -4341,11 +4341,12 @@
         </div>
     </div>
 
-    <div id="generic_draggable_template" class="template_element">
+    <template id="generic_draggable_template">
         <div class="draggable">
-            <div id="" class="fa-solid fa-grip drag-grabber"></div>
+            <div class="fa-solid fa-grip drag-grabber"></div>
         </div>
-    </div>
+    </template>
+
 
     <div id="rawPromptPopup" class="list-group">
         <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>

public/scripts/RossAscends-mods.js

@@ -450,7 +450,7 @@ export function dragElement(elmnt) {
         topbar, topbarWidth, topBarFirstX, topBarLastX, topBarLastY, sheldWidth;
 
     var elmntName = elmnt.attr('id');
-
+    console.log(`dragElement called for ${elmntName}`);
     const elmntNameEscaped = $.escapeSelector(elmntName);
     const elmntHeader = $(`#${elmntNameEscaped}header`);
 

public/scripts/extensions/gallery/index.js

@@ -134,7 +134,6 @@ async function showCharGallery() {
 
         const items = await getGalleryItems(url);
         makeMovable();
-        let close = callPopup('', "text");
         console.log("close", close);
         if ($("body").css("position") === "fixed") {
             $("body").css("position", "static");
@@ -145,7 +144,7 @@ async function showCharGallery() {
         }, 100);
 
         //next, we add `<div id="" class="fa-solid fa-grip drag-grabber"></div>` to zoomFor_test
-        document.getElementById(`zoomFor_test`).innerHTML += `<div id="" class="fa-solid fa-grip drag-grabber"></div>`;
+        //document.getElementById(`zoomFor_test`).innerHTML += `<div id="" class="fa-solid fa-grip drag-grabber"></div>`;
 
         // close.then(() => {
         //     $("#my-gallery").nanogallery2("destroy");
@@ -269,9 +268,67 @@ function makeMovable(){
     });
 }
 
+function makeDragImg(id, url) {
+    // Step 1: Clone the template content
+    const template = document.getElementById('generic_draggable_template');
+
+    if (!(template instanceof HTMLTemplateElement)) {
+        console.error('The element is not a <template> tag');
+        return;
+    }
+
+    const newElement = document.importNode(template.content, true);
+
+    // Step 2: Append the given image
+    const imgElem = document.createElement('img');
+    imgElem.src = url;
+
+    const draggableElem = newElement.querySelector('.draggable');
+    if (draggableElem) {
+        draggableElem.appendChild(imgElem);
+
+        // Set a unique id for the draggable element
+        draggableElem.id = `draggable_${id}`;
+
+        // Ensure that the newly added element is displayed as block
+        draggableElem.style.display = 'block';
+
+        // Find the .drag-grabber and set its ID
+        const dragGrabber = draggableElem.querySelector('.drag-grabber');
+        if (dragGrabber) {
+            dragGrabber.id = `zoomFor_${id}header`;
+        }
+    }
+
+    // Step 3: Attach it to the body
+    document.body.appendChild(newElement);
+
+    // Step 4: Call dragElement and loadMovingUIState
+    const appendedElement = document.getElementById(`draggable_${id}`);
+    if (appendedElement) {
+        var elmntName = $(appendedElement);
+        dragElement(elmntName);
+        loadMovingUIState();
+
+        // Prevent dragging the image
+        console.log(`#draggable_${id} img`);
+        $(`#draggable_${id} img`).on('dragstart', (e) => {
+            console.log('saw drag on avatar!');
+            e.preventDefault();
+            return false;
+        });
+    } else {
+        console.error("Failed to append the template content or retrieve the appended content.");
+    }
+}
+
+
 function viewWithFancybox(items) {
     if (items && items.length > 0) {
         var url = items[0].responsiveURL(); // Get the URL of the clicked image/video
-        window.open(url, '_blank'); // Open the URL in a new window/tab
+        // ID should just be the last part of the URL, removing the extension
+        var id = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+        makeDragImg(id, url);
     }
 }
+