JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://threedubmedia.com/inc/css/base.css">
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.0.min.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.0.min.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<title>ThreeDubMedia &middot; jquery.event.drag</title>
</head>
<body>
    <h1>Live Drag Demo</h1>
    <p>
        <input type="button" id="add" value="Add a Box" />
        to the screen, drag it around, thanks to "live" delegation.
    </p>
</body>
</html>

CSS

.drag {
    position: absolute;
    border: 1px solid #89B;
    background: #BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
    text-align: center;
    line-height: 58px;
}

JavaScript

jQuery(function($){
    var num = 1;
    $('#add').click(function(){
        $('<div class="drag"/>')
            .text( num++ )             
            .appendTo( document.body )             
            .css({                  
                top: Math.random() * ( $( window ).height() - 100 ) + 20,
                left: Math.random() * ( $( window ).width() - 100 ) + 20
            });
    });
    $('.drag').live("drag",function( ev, dd ){
        $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
});