Dragging HTML Elements 2

100%

Dragging HTML Elements 2

✓ Published6🌍 Public

Last edited Sep 26, 2023

Created on May 6, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

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

87% 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

87% match

Loading thumbnail…

Dragging Elements

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.

Xxieyunli111

84% 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

70% match

Loading thumbnail…

File Purging Tool

This interactive file purging tool lets users assemble collections of parameters and assign them to processing targets through a drag-and-drop interface. The tool uses custom HTML elements (`vc-dragitem`, `vc-dragcontainer`) built on native HTML5 drag-and-drop APIs, with SVG shapes serving as sample data items. Users can create, delete, and collapse draggable collections, while buttons allow them to save and restore connection configurations. The SVG hints at geometric data representations, but the main focus is on managing and connecting file groups through direct manipulation.

Aakshayms0

69% 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

69% 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

68% match