fix: cannot dnd in firefox

ourongxing · Nov 21, 2024 · 5af24c8 · 5af24c8
1 parent bf07610
commit 5af24c8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
@@ -140,10 +140,10 @@ function NewsCard({ id, setHandleRef }: NewsCardProps) {
             className={$("btn", isFocused ? "i-ph:star-fill" : "i-ph:star-duotone")}
             onClick={toggleFocus}
           />
+          {/* firefox cannot drag a button */}
           {setHandleRef && (
-            <button
+            <div
               ref={setHandleRef}
-              type="button"
               className={$("btn", "i-ph:dots-six-vertical-duotone", "cursor-grab")}
             />
           )}

diff --git a/src/components/common/dnd/useSortable.ts b/src/components/common/dnd/useSortable.ts
@@ -37,10 +37,8 @@ export function useSortable(props: SortableProps) {
     if (handleRef && nodeRef) {
       const cleanup = combine(
         draggable({
-        // use custom drag preview
-          element: handleRef,
-          // element: ref,
-          // dragHandle: handleRef,
+          element: nodeRef,
+          dragHandle: handleRef,
           getInitialData: () => ({ id: props.id, instanceId }),
           onGenerateDragPreview({ nativeSetDragImage, location }) {
             setCustomNativeDragPreview({