@dnd-kit

@dnd-kit は React で使えるドラッグアンドドロップのライブラリである。

https://docs.dndkit.com

タッチスクリーンでドラッグアンドドロップが上手く動作しない

Draggableのstyleにtouch-action: noneを設定してみる。

function Draggable(props: { children: React.ReactNode }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: "draggable",
  });
  const style = {
    transform: transform
      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
      : undefined,
    touchAction: "none",
  };

  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {props.children}
    </button>
  );
}

ドラッグした要素が画面外に移動しないようにしたい

DndContextにmodifiersを追加する。

Modifiers | @dnd-kit – Documentation

$ npm i @dnd-kit/modifiers

import { DndContext, DragEndEvent, DragStartEvent } from "@dnd-kit/core";
import { restrictToWindowEdges } from "@dnd-kit/modifiers";

return <DndContext modifiers={[restrictToWindowEdges]}>(略)</DndContext>;