Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Dragging HTML Elements 2

Public visualization

Viewing a saved revision (read-only)

e8ffce3d4a8a4da7a4983bec3b5f1096

Fork of Dragging HTML Elements 2

0 stars0🌍 Public
PPiotr Paszek
Last edited May 22, 2022
Created on May 22, 2022

This example demonstrates a drag-and-drop interface for organizing items into hierarchical collections, built with custom HTML elements and the HTML5 Drag and Drop API. Users can drag individual items or multiple selected items between containers, with items either moving or cloning depending on the source container. The interface includes collapsible collection groups, delete buttons, and buttons to save and restore connection states. Code uses custom elements (`vc-dragitem`, `vc-dragcontainer`, `vc-dragclosebutton`, `vc-dragdeletebutton`) and embedded SVG graphics inside draggable items.

AI-generated description