Skip to content

Commit 1ce7e65

Browse files
clubandersonclaude
andcommitted
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>
1 parent 0a30f93 commit 1ce7e65

1 file changed

Lines changed: 15 additions & 6 deletions

File tree

examples/sonos-control.jsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ const getDragHandle = (dragging) => ({
127127
marginBottom: "8px",
128128
display: "flex",
129129
justifyContent: "center",
130+
pointerEvents: "auto",
130131
});
131132

132133
const dragIndicator = {
@@ -135,28 +136,36 @@ const dragIndicator = {
135136
letterSpacing: "2px",
136137
};
137138

138-
// Drag event handlers
139+
// Drag event handlers - use direct DOM manipulation for smooth dragging
140+
let dragElement = null;
141+
139142
const handleDragStart = (e) => {
140143
isDragging = true;
141144
dragStart = { x: e.clientX, y: e.clientY };
142145
posStart = { ...widgetPosition };
146+
// Find the widget container element
147+
dragElement = e.target.closest('.widget-container');
143148
document.addEventListener("mousemove", handleDragMove);
144149
document.addEventListener("mouseup", handleDragEnd);
145150
e.preventDefault();
146151
};
147152

148153
const handleDragMove = (e) => {
149-
if (!isDragging) return;
154+
if (!isDragging || !dragElement) return;
150155
const dx = e.clientX - dragStart.x;
151156
const dy = e.clientY - dragStart.y;
152-
widgetPosition = {
153-
top: Math.max(0, posStart.top + dy),
154-
right: Math.max(0, posStart.right - dx),
155-
};
157+
const newTop = Math.max(0, posStart.top + dy);
158+
const newRight = Math.max(0, posStart.right - dx);
159+
// Update position in memory
160+
widgetPosition = { top: newTop, right: newRight };
161+
// Directly update DOM for smooth dragging
162+
dragElement.style.top = `${newTop}px`;
163+
dragElement.style.right = `${newRight}px`;
156164
};
157165

158166
const handleDragEnd = () => {
159167
isDragging = false;
168+
dragElement = null;
160169
savePosition(widgetPosition);
161170
document.removeEventListener("mousemove", handleDragMove);
162171
document.removeEventListener("mouseup", handleDragEnd);

0 commit comments

Comments
 (0)