Draganddropontwerp

Draganddropontwerp is een UI-patroon waarbij gebruikers objecten kunnen verplaatsen of kopiëren door ze te slepen en los te laten op een doelgebied. Het wordt toegepast in bestandsbeheerders, agenda- en planningstools, kanban-borden, fotobibliotheken en ontwerpsoftware. In Engelstalige context wordt vaak gesproken van drag-and-drop ontwerp, maar in het Nederlands blijft draganddropontwerp of drag-and-drop ontwerp gebruikelijk.

Belangrijke ontwerpkenmerken zijn onder meer zichtbare handvatten en grenzen; duidelijke feedback tijdens het slepen (cursorverandering, lint, schaduw, hover- of dropzone-iconen); realistische snap- en alignering; en expliciete acties bij loslaten (verplaatsen versus kopiëren) door modifiers of dropzone-types. Patronen omvatten draggable items, dropzones en sortering; bij multislepen worden soms complexe interacties ondersteund.

Toegankelijkheid en gebruiksaanpak: niet iedereen kan slepen; bied keyboard-toegang en alternatieven zoals selecteren en klikken op een verplaats- of kopieerknop. Zorg voor duidelijke foutafhandeling, undo en visuele bevestiging. Houd rekening met verschillende apparaten en schermformaten; de implementatie op mobiel vereist vaak extra aandacht en aangepaste interacties, zodat de functionaliteit niet volledig afhankelijk is van muis of touch.

Techniek: op webplatforms wordt drag-and-drop vaak gerealiseerd met de HTML5 drag-and-drop API (draggable, ondragstart, ondragover, ondrop, dataTransfer). Deze API is krachtig maar kan beperkt zijn op mobiel en complex in geavanceerde toepassingen; veel teams gebruiken bibliotheken of aangepaste pointer- of drag-systemen. Ontwerpers richten zich op consistente visuele cues en voorspelbaar gedrag om de interactie begrijpelijk te houden.