Dragging Elements

100%

Dragging Elements

✓ Published0🌍 Public

Last edited Mar 3, 2023

Created on Mar 3, 2023

This example demonstrates a drag-and-drop interface for organizing items into nested containers. Users can select and move draggable cards between an available items pool, collection containers, and target containers, with support for multi-selection, cloning, and collapsible sub-containers. The interface is built with custom HTML elements and the Drag and Drop API, using `dragstart`, `dragover`, and `drop` events to manage item movement. SVG graphics render simple shapes within some draggable items, while JavaScript handles selection state, group permissions, and data saving/restoring via button controls.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Dragging HTML Elements 2

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.

PPiotr Paszek

85% match

Loading thumbnail…

Dragging HTML Elements 2

This example demonstrates a drag-and-drop interface for building workload models. Users can select items from an available pool and drag them into different collection and target containers, organizing them into a hierarchical structure. The interface supports creating clones, deleting items, collapsing containers, and saving or restoring connection states. It is implemented using custom HTML elements defined through the Web Components API, with drag-and-drop handled by native HTML5 events and SVG graphics embedded within draggable items.

WWillimnot

84% match

Loading thumbnail…

Fork of Dragging HTML Elements 2

This interactive example demonstrates a drag-and-drop workload modeller built with custom HTML elements. It shows how items (including nested SVG graphics) can be moved between containers, reordered within collections, and grouped into targets using vc-dragitem and vc-dragcontainer elements. The implementation relies on the native HTML5 Drag and Drop API, custom elements defined via customElements.define, and CSS grid for layout. Users can select multiple items, collapse/delete collections, and save or restore connection configurations.

AAndre J Denais

83% match

Loading thumbnail…

Fork of Dragging HTML Elements 2

This interactive workflow modeller demonstrates a drag-and-drop interface for composing workload selections. Users arrange draggable items from an available pool into collection containers and target slots, with support for multi-selection, cloning, and collapsible or deletable groups. The interface relies on custom HTML elements, including `vc-dragcontainer`, `vc-dragitem`, and `vc-dragclosebutton`, which manage drag events, drop groups, and selection states. The code also includes save and restore functions for persisting connection configurations, with inline SVG graphics used within certain draggable items.

Cchristian jensen

79% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

73% match

Loading thumbnail…

Drag & Drop

A drag-and-drop interaction demonstrates how a single image square can be moved between a series of grid cells using the native HTML5 Drag and Drop API. The example uses a random Unsplash image as the draggable fill element, which gains a highlighted border while held and a dashed outline on hoverable empty containers. JavaScript event listeners handle `dragstart`, `dragend`, `dragover`, `dragenter`, `dragleave`, and `drop` to manage state changes and reposition the image, with CSS controlling the visual feedback for dragging and hovering states.

RRubens

73% match

Loading thumbnail…

Fork of Drag & Drop

A drag-and-drop interaction demonstrates how a single image tile can be moved between a series of empty container boxes. Built with vanilla JavaScript and the HTML5 Drag and Drop API, the example uses event listeners for `dragstart`, `dragover`, `drop`, and related actions to manage the transfer of a `draggable` element. The visual styling, defined in CSS, changes the tile's appearance when it is held or hovering over a target. The tile's image is loaded from a random Unsplash source URL, and the layout presents ten boxes in a row.

PPedram

72% match

Loading thumbnail…

Drag & Drop

This example demonstrates a drag-and-drop interaction where a single draggable image can be moved into any of ten empty placeholder boxes. Using the native HTML5 drag-and-drop API, the JavaScript code listens for `dragstart`, `dragend`, `dragover`, `dragenter`, `dragleave`, and `drop` events to manage the image’s visual state (such as adding a highlight or making it invisible) and to append it to the targeted container. The visual style, including the salmon background and dashed hover indicator, is defined in the accompanying CSS, while the image itself is loaded from a random Unsplash URL.

Jjsong

70% match