Skip to main content
SimilarExport ZIP
100%

Drag & Drop

✓ Published1🌍 Public
RRubens
Last edited Jan 30, 2020
Created on Jan 28, 2020
Forked from A

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.

AI-generated description

Based on Drag & Drop With Vanilla JS

MIT Licensed

Similar vizzes

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
87% 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
85% 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
73% 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
72% 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
69% 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
67% match
Loading thumbnail…

Drag Multiples

A grid of sixteen small SVG circles, each in its own separate SVG element, can be dragged independently within the bounds of its cell. The example demonstrates the `d3.behavior.drag` API, using its `origin` accessor and `drag` event to update circle positions. Each circle is constrained to its local coordinate space, with position clamped between the radius and the SVG width or height. The code uses d3.v3 and renders the visuals as SVG, with the data derived from a static array of sixteen identical starting points.

Mmbostock
67% 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
67% match