Native Drag-and-Drop is Awesome!

There's a bunch of libraries to facilitate drag-and-drop functionality on the web, but the native functionality built into modern browsers (and actually really well-supported now) is pretty cool and quite simple to use. The basics To start making something draggable, simply add draggable="true" to the element: PreviewCode<div draggable="true" class="drag-me"> Drag me </div> <style> .drag-me { width: 5rem; height: 5rem; border-radius: 1rem; background-color: forestgreen; color: white; display: flex; justify-content: center; align-items: center; cursor: grab; } </style> You will probably want to assign some data to this. To do this, we listen to the dragstart event, and use the event.dataTransfer.setData() method to set some data. You can even set multiple types of data by using various different mime types for the first parameter of that method. Now we want to allow you to drop somewhere. By listening to the drop event on the target element, we can read out the data using…