JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="boundary_box">
    <div class="draggable" id="dragme">
        w00t Drag me around...
    </div>
</div>

CSS

#boundary_box {
    height:600px; width:500px; 
    overflow:none; 
    position:relative; 
    top:20px; left:10px;
    border: solid 1px #404040;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.33, rgb(196,192,68)),
        color-stop(0.49, rgb(122,171,36))  
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(196,192,68) 33%,
        rgb(122,171,36) 49%
    );
}
#dragme {
    background: url('http://thor-studio.com/imgShare/glass.pane.02.png');
    border:0px;
    width: 72px;
    height: 86px;
    position: absolute;
    top:20px;
    left:120px;
    padding:20px;
}
.draggable{cursor:pointer;}

JavaScript

$(document).ready(function() {

    $('#dragme').draggable({ 
        //  Regular settings for jQuery.UI.draggable function.
        containment: "#boundary_box", 
        scroll: false,
        // start and stop. We add in the momentum functions here.
        start: function(e, ui) {
            dragMomentum.start(this.id, e.clientX, e.clientY, e.timeStamp);
         },
        stop: function(e, ui) {
            dragMomentum.end(this.id, e.clientX, e.clientY, e.timeStamp);
        }  
     });
});  // end document ready

var dragMomentum = new function () {    
    var howMuch = 30;  // change this for greater or lesser momentum
    var minDrift = 6; // minimum drift after a drag move
    var easeType = 'easeOutBack';
    
    //  The standard ease types are 'linear' and 'swing'
    //  To use special ease types, you need this plugin:  
    //  jquery.easing.1.3.js  http://gsgd.co.uk/sandbox/jquery/easing/
    //  special ease types:  'linear',  'swing',  'easeInQuad',  
    //  'easeOutQuad',  'easeInOutQuad',  'easeInCubic',  
    //  'easeOutCubic',  'easeInOutCubic',  'easeInQuart', 
    //  'easeOutQuart',  'easeInOutQuart', 'easeInQuint', 
    //  'easeOutQuint',  'easeInOutQuint',  'easeInSine',  
    //  'easeOutSine',  'easeInOutSine',  'easeInExpo',  
    //  'easeOutExpo',  'easeInOutExpo',  'easeInCirc',  
    //  'easeOutCirc',  'easeInOutCirc',  'easeInElastic',
    //  'easeOutElastic',  'easeInOutElastic',  'easeInBack',
    //  'easeOutBack',  'easeInOutBack',  'easeInBounce',
    //    'easeOutBounce',  'easeInOutBounce'
    //  Also see this page for a great display of the easing types.
    //  http://jqueryui.com/demos/effect/#easing
    
    //  No user options below this point.

    var dXa =[0];
    var dYa =[0];
    var dTa =[0];
    
    this.start = function (elemId, Xa, Ya, Ta)  {
          dXa[elemId] = Xa;
        dYa[elemId] = Ya;
        dTa[elemId] = Ta;
        
      }; // END dragmomentum.start()

    this.end = function...