#drag-and-drop code explainers

typescript

import { useCallback, useRef, useState } from "react";
 
type UploadZoneProps = {
  accept?: string[];

A drag-and-drop file upload zone in React

drag-and-drop file-validation controlled-state

Intermediate 9 steps

typescript

import { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

Drag-and-drop reordering with signals in Angular

drag-and-drop signals optimistic-update

Intermediate 8 steps

javascript

import { useState } from 'react';
 
export function ReorderableList({ initialItems }) {
  const [items, setItems] = useState(initialItems);

Drag-to-reorder lists in React

drag-and-drop state-management immutable-updates

Intermediate 8 steps

javascript

function makeReorderableList(listEl, onReorder) {
  let draggedItem = null;
 
  listEl.addEventListener('dragstart', (e) => {

Drag-to-reorder lists with the HTML5 drag API

drag-and-drop event-delegation dom-manipulation

Intermediate 8 steps