JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="boxMenu">
    <div class="box">1<a href="111">hop</a></div>
    <div class="box">2<a href="222">hip</a></div>
    <div class="box">3<a href="333">hup</a></div>
</div>

<div id="dlBox">PUTMEHERE</div>

CSS

.box {
    background-color: #222;
    border:1px solid #000;
    width: 80px; height:60px;
    margin:3px;
    float:left;
    border-radius:6px;
    z-index:100;
}
div.box.ui-draggable-dragging { box-shadow: 7px 7px 4px #111; }
#dlBox {
    position:absolute;
    top:60px;
    right:10px;
    width:100px;
    background-color: rgba(100,120,100, 0.5); 
    border:1px solid #445544;
    color:#448844;
    border-radius: 20px;
    text-align:center;
    padding:40px 10px;
}

JavaScript

$(document).ready(function(){
  
    $(".box").data('zip', $(this).find("a").attr('href') ); //save zip link in data() on .box div
  
    //DRAGGABLE
    $(".box").draggable({
	containment: 'window',
	revert:true,
	cursor:'move',
	zIndex: 110,
    });
    //DROPPABLE
    $("#dlBox").droppable({
	accept: ".box",
	drop: handleBoxDrop,
	zIndex:99
    });
    //RESET
/*    $("#dlReset").click( function() {
	$("#dlBox .box").draggable('enable');
	$("#dlBox .box").draggable('option', 'revert', true);
    });  */
});

function handleBoxDrop( event, ui ) {
    var $box = ui.draggable;
    $box.draggable( 'disable' );
    $box.draggable( 'option', 'revert', false );
    $box.appendTo('#dlBox');
    var isVisible = $box.is(':visible');
    var zipUrl = $box.data('zip');
    alert( isVisible + "\n" + zipUrl );
}