JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://examples.kevinchisholm.com/html5/drag-and-drop/css/part-i.css">
<link rel="stylesheet" href="http://examples.kevinchisholm.com/html5/drag-and-drop/css/part-ii.css">
<link rel="stylesheet" href="http://examples.kevinchisholm.com/html5/drag-and-drop/css/drag-and-drop.css">
<!--

    Getting Started with HTML5 Drag-and-Drop
    blog.kevinchisholm.com
    Part III: Setting a Custom Drag Image
-->

<article>
		<header>
			<img src="http://examples.kevinchisholm.com/html5/drag-and-drop/images/html5-logo.png" class="html5-logo" >
			<hgroup>
			<h1>Getting Started with HTML5 Drag-and-Drop</h1>
			<h2><a href="http://blog.kevinchisholm.com">blog.kevinchisholm.com</a></h2>
			<h3>Part III: Setting a Custom Drag Image</h3>
			</hgroup>
	</header>
    <section id="content">
        <div class="drop-elements">
            <div class="dropElement droppable"></div>
        </div>
        <div class="drag-elements droppable  hasChild">
            <div id="drag1" class="dragElement redBorder">Drag me!</div>
        </div>
    </section>
</article>

JavaScript

(function () {
    //each dragable element needs this for its dragstart event
    var dragStartHandler = function (ev) {
        var dragIcon = null;
    
        //set a reference to the element that is currenly being dragged
        ev.originalEvent.dataTransfer.setData("Text",ev.target.id);
    
        //create a custom drag image
        dragIcon = document.createElement('img');
        dragIcon.src = 'http://bit.ly/bartSimpsonSkateboard200X200';
    
        //set the custom drag image
        ev.originalEvent.dataTransfer.setDragImage(dragIcon, 100, 100);
    },
    //each droppable element needs this for its dragover event
    allowDragover = function (event) {
        //prevent the browser from any default behavior
        event.preventDefault();
    },
    //each of the four light-brown boxes at top have this bound to their drop event
    dropHandler = function (event) {
        var id = '';

        //prevent the browser from any default behavior
        event.preventDefault();

        //get a reference to the element that is being dropped
        id = event.originalEvent.dataTransfer.getData("Text");

        //add the hasChild class so that the UI can update
        $(event.target).addClass('hasChild');

        //move the dragged element into the drop target
        event.target.appendChild(document.getElementById(id));

        $(document.getElementById(id)).html('<i>Dropped</i>!');
    };


    $(document).ready(function () {
        //make each dragElement draggable
        $('.dragElement').attr('draggable', 'true');

        //bind the dragStartHandler function to all dragElements
        $('.dragElement').bind('dragstart', dragStartHandler);

        //bind the dragStartHandler function to all dragElements
        $('.dropElement').bind('dragover', allowDragover);

        //bind the dragStartHandler function to all dragElements
        $('.dropElement').bind('drop', dropHandler);

        //add the dragEnter class to any element that fires a...