JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

 

<script language="javascript" type="text/javascript"><!--

    var dragitem = undefined;

 

    function setdragitem(item, evt) {

        dragitem=item;

        // alert('item: '+item);

        // item is an HTML DIV element.

        // evt is an event.

 

        // If the item should not be draggable, enable this next line.

        // evt.preventDefault();

 

        return true;

    }

    function cleardragitem() {

        dragitem=undefined;

        // alert('item: '+item);

    }

    function dodrag() {

        // alert('item: '+dragitem);

    }

 

    // This is required---used to tell WebKit that the drag should

    // be allowed.

    function handledragenter(elt, evt) {

        evt.preventDefault();

        return true;

    }

    function handledragover(elt, evt) {

        evt.preventDefault();

        return true;

    }

 

 

    function handledragleave(elt, evt) {

 

    }

 

    function handledrop(elt, evt) {

        alert('drop');

        dragitem.style.display="none";

        var newid=dragitem.id + '_dest';

        var dest = document.getElementById(newid);

        dest.innerHTML = dragitem.innerHTML;

    }

 

 

// --></script>

 

<style type="text/css"><!--

 

    .wordbox { border: 1px solid black; text-align: center; width: 50px; float: left; -webkit-user-drag: element; -webkit-user-select: none; }

    .spacer { clear: both; }

    .target { margin-top: 30px; padding: 30px; width: 70px; border: 1px solid black; background: #c0c0ff; margin-bottom: 30px; -webkit-user-drop: element; }

    .word   { margin: 30px; min-height: 30px; border-bottom: 1px solid black; width: 50px;  float: left; }

 

--></style>

 

</head>

<body>

 

<p>Drop words onto target area to put them in their places.</p>

 

<div class='wordbox' id='this' ondragstart='setdragitem(this, event);' ondrag='dodrag();' ondragend='cleardragitem();'>This</div>

<div class='wordbox' id='is' ondragstart='setdragitem(this,...