JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>
    Hover over the grey boxes and watch the cursor change.<br/>
    Then drag the paint icon to one of the grey boxes and watch the cursor.
</p>
<img id="i" src="http://icons.iconarchive.com/icons/icons8/windows-8/64/Diy-Paint-Bucket-icon.png"/>

    <table>
        <tr>
            <td class="a">Copy</td>
            <td class="b">None</td>
        </tr>
        <tr>
            <td class="c">Move</td>
            <td class="d">Crosshair</td>
        </tr>
    </table>

CSS

td {
    padding: 30px;
    font-size: 2em;
    font-family: arial;
    border: 3px solid white;
    background-color: #eee;
    border-spacing: 10px;
}

.a {    cursor: copy;}
.b {    cursor: none;}
.c {    cursor: move;}
.d {    cursor: crosshair;}

img {
    cursor: move;
    cursor: -moz-grabbing;
}

#drag {    cursor: none;}

JavaScript

var i = $('#i');

$('#i').draggable({
helper: function(e) {
return '<img id="drag"  src="http://icons.iconarchive.com/icons/icons8/windows-8/64/Diy-Paint-Bucket-icon.png">';
					}
// you can also .remove()/hide() the element on dragging
//,drag: function(event, ui){$(this).remove();}    
});

$('td').on('dragover', function(e) {
   e.preventDefault();
   e.stopPropagation();
    return false;
});

$('td').on('drop', function(e) {
    $(this).append(i);
    e.preventDefault();
});