Drag & Drop

100%

✓ Published1🌍 Public

Last edited Jan 29, 2020

Created on Jan 29, 2020

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.

AI-generated description

Based on Drag & Drop With Vanilla JS

MIT Licensed

Similar vizzes

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

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

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

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

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

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

65% match

Loading thumbnail…

Multitouch Drag II

Twenty colored divs drift across the browser window, each rendered as a circle via CSS border-radius and positioned using a CSS transform translate. Dragging a circle with a mouse or touch lifts it visually: it expands, gains a soft box-shadow, and uses an elastic ease during the size transition. The implementation uses D3 v3’s `d3.behavior.drag` for pointer handling, `d3.scale.category10` for colors, and `d3.interpolate` to animate box-shadow between drag states. Data is randomly generated from 20 coordinate pairs.

Mmbostock

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

64% match