Adds a pointer capture on component drag

concord-consortium · Oct 2, 2024 · 2d8a98f · 2d8a98f
1 parent 55f14e3
commit 2d8a98f
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/v3/src/components/container/free-tile-component.tsx b/v3/src/components/container/free-tile-component.tsx
@@ -44,6 +44,21 @@ export const FreeTileComponent = observer(function FreeTileComponent({ row, tile
     activeDrag => {
     const dragTileId = getDragTileId(activeDrag)
     if (dragTileId) {
+      const draggedElement = document.getElementById(dragTileId)
+      if (draggedElement) {
+        // Capture pointer events for the dragged tile
+        // draggedElement.addEventListener('pointerdown', (event) => {
+        //   draggedElement.setPointerCapture(event.pointerId)
+        // })
+        draggedElement.addEventListener('pointermove', (event) => {
+          draggedElement.setPointerCapture(event.pointerId)
+        })
+
+        draggedElement.addEventListener('pointerup', (event) => {
+          draggedElement.releasePointerCapture(event.pointerId)
+        })
+      }
+
       if (isFreeTileRow(row)) {
         const allowBringToFront = dragTileId === tile.id ? tile.content.allowBringToFront : true
         row.moveTileToTop(dragTileId, allowBringToFront)