Buttons are now movable

cams.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         cams
 // @namespace    http://tampermonkey.net/
-// @version      1.2.0
+// @version      1.2.1
 // @description  Set maxDockedCamsForUser, keep-alive, and multi-poke
 // @author       You
 // @match        https://chat.fabswingers.com/*
@@ -20,6 +20,94 @@
     const LOCK_KEY = 'maxDockedCams_scriptLock';
     const KEEPALIVE_SETTINGS_KEY = 'keepAlive_settings';
     const MULTIPOKE_SETTINGS_KEY = 'multiPoke_settings';
+    const BUTTON_POSITIONS_KEY = 'buttonPositions';
+
+    // Load saved button positions
+    function loadButtonPositions() {
+        try {
+            const saved = localStorage.getItem(BUTTON_POSITIONS_KEY);
+            if (saved) {
+                return JSON.parse(saved);
+            }
+        } catch (e) {
+            console.log('Error loading button positions', e);
+        }
+        return {};
+    }
+
+    function saveButtonPosition(buttonId, x, y) {
+        const positions = loadButtonPositions();
+        positions[buttonId] = { x, y };
+        localStorage.setItem(BUTTON_POSITIONS_KEY, JSON.stringify(positions));
+    }
+
+    function makeDraggable(button) {
+        let isDragging = false;
+        let wasDragged = false;
+        let startX, startY, initialX, initialY;
+
+        button.style.cursor = 'move';
+
+        button.addEventListener('mousedown', function(e) {
+            if (e.button !== 0) return; // Only left click
+            isDragging = true;
+            wasDragged = false;
+            startX = e.clientX;
+            startY = e.clientY;
+            initialX = button.offsetLeft;
+            initialY = button.offsetTop;
+            e.preventDefault();
+        });
+
+        document.addEventListener('mousemove', function(e) {
+            if (!isDragging) return;
+
+            const deltaX = e.clientX - startX;
+            const deltaY = e.clientY - startY;
+
+            // Only count as drag if moved more than 5px
+            if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+                wasDragged = true;
+            }
+
+            let newX = initialX + deltaX;
+            let newY = initialY + deltaY;
+
+            // Keep within viewport
+            newX = Math.max(0, Math.min(newX, window.innerWidth - button.offsetWidth));
+            newY = Math.max(0, Math.min(newY, window.innerHeight - button.offsetHeight));
+
+            button.style.left = newX + 'px';
+            button.style.top = newY + 'px';
+            button.style.right = 'auto';
+        });
+
+        document.addEventListener('mouseup', function(e) {
+            if (isDragging) {
+                isDragging = false;
+                if (wasDragged) {
+                    saveButtonPosition(button.id, button.offsetLeft, button.offsetTop);
+                }
+            }
+        });
+
+        // Prevent click event if we were dragging
+        button.addEventListener('click', function(e) {
+            if (wasDragged) {
+                e.preventDefault();
+                e.stopPropagation();
+                wasDragged = false;
+            }
+        }, true);
+
+        // Apply saved position if exists
+        const positions = loadButtonPositions();
+        if (positions[button.id]) {
+            button.style.left = positions[button.id].x + 'px';
+            button.style.top = positions[button.id].y + 'px';
+            button.style.right = 'auto';
+        }
+    }
 
     // Public room names to match against
     const PUBLIC_ROOMS = [
@@ -632,6 +720,7 @@
         });
 
         document.body.appendChild(maxDockedButton);
+        makeDraggable(maxDockedButton);
         console.log('MaxDockedCams button created');
 
         // Keep Alive button
@@ -647,6 +736,7 @@
         });
 
         document.body.appendChild(keepAliveButton);
+        makeDraggable(keepAliveButton);
         updateKeepAliveButtonState();
         console.log('KeepAlive button created');
 
@@ -664,6 +754,7 @@
         });
 
         document.body.appendChild(multiPokeButton);
+        makeDraggable(multiPokeButton);
         updateMultiPokeButtonState();
         console.log('MultiPoke button created');
 

meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         cams
 // @namespace    http://tampermonkey.net/
-// @version      1.2.0
+// @version      1.2.1
 // @description  Set maxDockedCamsForUser, keep-alive, and multi-poke
 // @author       You
 // @match        https://chat.fabswingers.com/*