Spaces:

JakeFake222
/

ImageToPDFTouchControl

Running

App Files Files Community

JakeFake222 commited on Jul 15, 2025

Commit

bc26067

verified ·

1 Parent(s): 1a26ae1

Update index.html

Browse files

Files changed (1) hide show

index.html +81 -13

index.html CHANGED Viewed

@@ -9,6 +9,7 @@
             font-family: Arial, sans-serif;
             margin: 20px;
             text-align: center;
         }
         #imageContainer {
             display: flex;
@@ -21,8 +22,9 @@
         }
         .imageWrapper {
             max-width: 200px;
-            cursor: move; /* Indicates draggable */
             position: relative;
         }
         .imageWrapper img {
             max-width: 100%;
@@ -31,7 +33,10 @@
             border-radius: 5px;
         }
         .imageWrapper.dragging {
-            opacity: 0.5; /* Visual feedback during drag */
         }
         button {
             padding: 10px 20px;
@@ -50,7 +55,7 @@
 <body>
     <h1>Images to PDF Converter</h1>
     <input type="file" id="imageInput" accept="image/*" multiple>
-    <p>Drag and drop images to reorder them for the PDF.</p>
     <div id="imageContainer"></div>
     <button onclick="generatePDF()">Download as PDF</button>
@@ -81,7 +86,7 @@
             });
         });
-        // Render images with drag-and-drop functionality
         function renderImages() {
             imageContainer.innerHTML = '';
             images.forEach((image, index) => {
@@ -94,40 +99,103 @@
                 img.src = image.src;
                 wrapper.appendChild(img);
-                // Drag start
                 wrapper.addEventListener('dragstart', (e) => {
                     wrapper.classList.add('dragging');
                     e.dataTransfer.setData('text/plain', index);
                 });
-                // Drag end
                 wrapper.addEventListener('dragend', () => {
                     wrapper.classList.remove('dragging');
                 });
-                // Drag over
                 wrapper.addEventListener('dragover', (e) => {
                     e.preventDefault();
                 });
-                // Drop
                 wrapper.addEventListener('drop', (e) => {
                     e.preventDefault();
                     const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));
                     const dropIndex = parseInt(wrapper.dataset.index);
-                    // Reorder images array
-                    const [draggedImage] = images.splice(draggedIndex, 1);
-                    images.splice(dropIndex, 0, draggedImage);
-                    // Re-render images
-                    renderImages();
                 });
                 imageContainer.appendChild(wrapper);
             });
         }
         // Generate PDF from images
         function generatePDF() {
             if (images.length === 0) {

             font-family: Arial, sans-serif;
             margin: 20px;
             text-align: center;
+            touch-action: none; /* Prevent default touch behaviors like scrolling */
         }
         #imageContainer {
             display: flex;
         }
         .imageWrapper {
             max-width: 200px;
+            cursor: move; /* For desktop */
             position: relative;
+            user-select: none; /* Prevent text selection during drag/touch */
         }
         .imageWrapper img {
             max-width: 100%;
             border-radius: 5px;
         }
         .imageWrapper.dragging {
+            opacity: 0.5; /* Visual feedback during drag/touch */
+        }
+        .imageWrapper.over {
+            border: 2px dashed #4CAF50; /* Visual feedback for drop target */
         }
         button {
             padding: 10px 20px;
 <body>
     <h1>Images to PDF Converter</h1>
     <input type="file" id="imageInput" accept="image/*" multiple>
+    <p>Drag and drop (desktop) or tap and move (mobile) images to reorder them for the PDF.</p>
     <div id="imageContainer"></div>
     <button onclick="generatePDF()">Download as PDF</button>
             });
         });
+        // Render images with drag-and-drop and touch functionality
         function renderImages() {
             imageContainer.innerHTML = '';
             images.forEach((image, index) => {
                 img.src = image.src;
                 wrapper.appendChild(img);
+                // Desktop drag-and-drop
                 wrapper.addEventListener('dragstart', (e) => {
                     wrapper.classList.add('dragging');
                     e.dataTransfer.setData('text/plain', index);
                 });
                 wrapper.addEventListener('dragend', () => {
                     wrapper.classList.remove('dragging');
+                    clearOverStyles();
                 });
                 wrapper.addEventListener('dragover', (e) => {
                     e.preventDefault();
+                    wrapper.classList.add('over');
+                });
+                wrapper.addEventListener('dragleave', () => {
+                    wrapper.classList.remove('over');
                 });
                 wrapper.addEventListener('drop', (e) => {
                     e.preventDefault();
                     const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));
                     const dropIndex = parseInt(wrapper.dataset.index);
+                    reorderImages(draggedIndex, dropIndex);
+                    renderImages();
+                });
+                // Touch events for mobile
+                wrapper.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    wrapper.classList.add('dragging');
+                    startTouchReorder(e, wrapper, index);
+                });
+                wrapper.addEventListener('touchmove', (e) => {
+                    e.preventDefault();
+                    handleTouchMove(e, wrapper);
+                });
+                wrapper.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    wrapper.classList.remove('dragging');
+                    endTouchReorder(wrapper, index);
+                    clearOverStyles();
                 });
                 imageContainer.appendChild(wrapper);
             });
         }
+        // Touch reordering logic
+        let touchStartY = 0;
+        let targetIndex = null;
+        function startTouchReorder(event, wrapper, index) {
+            const touch = event.touches[0];
+            touchStartY = touch.clientY;
+            targetIndex = index;
+        }
+        function handleTouchMove(event, wrapper) {
+            const touch = event.touches[0];
+            const touchY = touch.clientY;
+            // Find the element under the touch point
+            const elements = document.elementsFromPoint(touch.clientX, touchY);
+            const targetWrapper = elements.find(el => el.classList.contains('imageWrapper') && el !== wrapper);
+            // Clear previous 'over' styles
+            clearOverStyles();
+            if (targetWrapper) {
+                targetWrapper.classList.add('over');
+            }
+        }
+        function endTouchReorder(wrapper, startIndex) {
+            const overElement = document.querySelector('.imageWrapper.over');
+            if (overElement) {
+                const dropIndex = parseInt(overElement.dataset.index);
+                reorderImages(startIndex, dropIndex);
+                renderImages();
+            }
+        }
+        function clearOverStyles() {
+            document.querySelectorAll('.imageWrapper.over').forEach(el => el.classList.remove('over'));
+        }
+        function reorderImages(draggedIndex, dropIndex) {
+            if (draggedIndex !== dropIndex) {
+                const [draggedImage] = images.splice(draggedIndex, 1);
+                images.splice(dropIndex, 0, draggedImage);
+            }
+        }
         // Generate PDF from images
         function generatePDF() {
             if (images.length === 0) {