JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<div></div>

<pre id="i"></pre>

CSS

div { width: 30px; height: 70px; background: red; }
li { background: #eee; border: solid 1px #aaa; margin: 0 3px 3px 0; display: block; width: 20px; height: 20px; text-align: center; line-height: 20px; }

li.drophover { background: yellow; }

JavaScript

$( "div" ).draggable();
$( "li" ).droppable({hoverClass: 'drophover', tolerance: "touch", drop: function () {
    $( "#i" ).text( $( this ).text() );
}});