JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="canvas" class="snap-target"></div>
<div class="draggable-selectors">
    <div id="draggable" class="snap-target draggable small ui-widget-content">
        <div style="line-height: 125px;" class="text-box"><p>125 &times; 375 &times; 180</p></div>
    </div>
</div>

CSS

.draggable { padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; position: relative; }
        .small { border: 1px solid slateblue; width: 115px; height: 115px; background: #c5cae9 }
        .ui-widget-header p, .ui-widget-content p { margin: 0; }
        .text-box { text-align: center; vertical-align: middle; }
        body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 13px }
        #canvas { width: 600px; height: 300px; border: 1px solid #cccccc; margin: auto;
            position: relative; clear: both; }
        .draggable-selectors { margin: 10px auto; width: 1000px; }

JavaScript

$(function() {

            var x = null;

            $("#draggable").draggable({
                helper: 'clone',
                cursor: 'move',
                snap: '.snap-target'
            });

            $("#canvas").droppable({
                drop: function (e, ui) {
                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();
                        x.draggable({
                            helper: 'original',
                            containment: '#canvas',
                            snap: '.snap-target'
                        });
                        x.appendTo('#canvas');
                    }
                }
            });

        });