Fork of Dragging HTML Elements 2

100%

Fork of Dragging HTML Elements 2

✓ Published0🌍 Public

Last edited Aug 4, 2022

Created on Aug 4, 2022

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.

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

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

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

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

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

75% 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…

Fork of MIAGE base

This example demonstrates a draggable HTML div alongside an interactive SVG scene built with React and D3 v5. The SVG contains colored circles that animate on click and double-click events, and a separate rectangle that appends new colored rectangles as the mouse moves across the body. The React component tracks mouse position to render a circle, while D3 functions handle SVG manipulation and transitions. The page includes a draggable header, using CSS and JavaScript for the drag behavior, and displays a message element updated with D3 selectors.

PPedram

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