JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<link rel="stylesheet" href="http://threedubmedia.com/inc/css/base.css">
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.0.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.0.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.js"></script>
<h1>Basic Drag Demo</h1> 
<p>Drag the boxes around the screen.</p> 
<div class="drag" style="left:20px;"></div> 
<div class="drag" style="left:100px;"></div> 
<div class="drag" style="left:180px;"></div>

CSS

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

JavaScript

jQuery(function($){
    $('.drag').drag(function( ev, dd ){
        $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
        });
    });
});