Improve Sonos widget drag smoothness

Use direct DOM manipulation during drag for immediate visual feedback
instead of waiting for Übersicht's refresh cycle. Also add explicit
pointerEvents to drag handle.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Signed-off-by: Andrew Anderson <andy@clubanderson.com>

Author: clubanderson

examples/sonos-control.jsx

@@ -127,6 +127,7 @@ const getDragHandle = (dragging) => ({
   marginBottom: "8px",
   display: "flex",
   justifyContent: "center",
+  pointerEvents: "auto",
 });
 
 const dragIndicator = {
@@ -135,28 +136,36 @@ const dragIndicator = {
   letterSpacing: "2px",
 };
 
-// Drag event handlers
+// Drag event handlers - use direct DOM manipulation for smooth dragging
+let dragElement = null;
+
 const handleDragStart = (e) => {
   isDragging = true;
   dragStart = { x: e.clientX, y: e.clientY };
   posStart = { ...widgetPosition };
+  // Find the widget container element
+  dragElement = e.target.closest('.widget-container');
   document.addEventListener("mousemove", handleDragMove);
   document.addEventListener("mouseup", handleDragEnd);
   e.preventDefault();
 };
 
 const handleDragMove = (e) => {
-  if (!isDragging) return;
+  if (!isDragging || !dragElement) return;
   const dx = e.clientX - dragStart.x;
   const dy = e.clientY - dragStart.y;
-  widgetPosition = {
-    top: Math.max(0, posStart.top + dy),
-    right: Math.max(0, posStart.right - dx),
-  };
+  const newTop = Math.max(0, posStart.top + dy);
+  const newRight = Math.max(0, posStart.right - dx);
+  // Update position in memory
+  widgetPosition = { top: newTop, right: newRight };
+  // Directly update DOM for smooth dragging
+  dragElement.style.top = `${newTop}px`;
+  dragElement.style.right = `${newRight}px`;
 };
 
 const handleDragEnd = () => {
   isDragging = false;
+  dragElement = null;
   savePosition(widgetPosition);
   document.removeEventListener("mousemove", handleDragMove);
   document.removeEventListener("mouseup", handleDragEnd);