Add direct keyboard operation to websites and web apps.

useEffect(() => {
  return monitorForElements({
    onDrop({source, location}) {
      const target = location.current.dropTargets[0];
      if (
        !target ||
        !isTaskData(source.data) ||
        !isTaskData(target.data)
      ) return;

      moveTask(
        source.data.taskId,
        target.data.taskId,
        extractClosestEdge(target.data),
      );
    },
  });
}, [moveTask]);

const sortable = Sortable.create(list, {
  animation: 150,
  dataIdAttr: 'data-id',
  store: {
    get: () => loadOrder(),
    set: (sortable) =>
      saveOrder(sortable.toArray()),
  },
});

<DragDropProvider
  onDragEnd={(event) => {
    if (event.canceled) return;

    const {source} = event.operation;
    if (isSortable(source) &&
        source.initialIndex !== source.index) {
      const targetId = items[source.index];
      if (targetId != null) {
        moveItem(String(source.id), targetId);
      }
    }
  }}
>
  {/* sortable list */}
</DragDropProvider>

function SortableItem({id, index}) {
  const {ref} = useSortable({id, index});
  return <li ref={ref}
    data-sortable-id={String(id)}>{id}</li>;
}

<div cdkDropList
  (cdkDropListDropped)="drop($event)">
  @for (movie of movies; track movie;
        let index = $index) {
    <div cdkDrag
      class="example-box openkeynav-movie"
      [attr.data-index]="index">
      {{ movie }}
    </div>
  }
</div>

moveMovie(from: number, to: number) {
  if (from === to) return;

  moveItemInArray(this.movies, from, to);
  this.changeDetectorRef.markForCheck();
}

drop(event: CdkDragDrop<string[]>) {
  this.moveMovie(
    event.previousIndex,
    event.currentIndex,
  );
}

const ref = useRef(null);
const [, drag] = useDrag({
  type: ItemTypes.CARD,
  item: () => ({id, index}),
});
const [, drop] = useDrop({
  accept: ItemTypes.CARD,
  hover(item, monitor) {
    if (!ref.current) return;

    const from = item.index;
    const to = index;
    if (from === to) return;

    const rect = ref.current
      .getBoundingClientRect();
    const middleY =
      (rect.bottom - rect.top) / 2;
    const pointer = monitor.getClientOffset();
    if (!pointer) return;

    const pointerY = pointer.y - rect.top;
    if (from < to && pointerY < middleY) return;
    if (from > to && pointerY > middleY) return;

    moveCard(from, to);
    item.index = to;
  },
});

drag(drop(ref));

return (
  <div ref={ref}
    className="openkeynav-card"
    data-index={index}>
    {text}
  </div>
);

function moveItem(source, destination) {
  destination.append(source);
  // Reset application-owned transform state here when needed.
}

interact('.dropzone').dropzone({
  accept: '.draggable',
  ondrop(event) {
    moveItem(
      event.relatedTarget,
      event.target,
    );
  },
});