JSFiddle - React, Tailwind, and code Playground
HTML
<div id="red"></div>
<img src="http://placehold.it/50x50" id="dragPic" alt="42" width="100" height="100">
CSS
#red
{
width:200px;
height:200px;
border:1px solid pink;
}
JavaScript
$( "#dragPic" ).draggable(); //Image will be draggable
$( "#red" ).droppable({ //Image has dragged into "red" div
drop: function( event, ui ) {
$( this )
.addClass( "redDrop" ) //Custom CSS
.html(ui.draggable); //Insert image inside div
$(ui.draggable).css({position:''});
/* Now I need to remove the image that user dragged. */
}
});