{"version":"1.0","type":"rich","title":"Drag & Drop","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/289b1e74290740b1ad77bffee1e25f0b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}