JSFiddle - React, Tailwind, and code Playground

by mattsahr

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="boundary_box">
    <div class="draggable">
        w00t<br /><br /> Drag me around...
    </div>
</div>

CSS

#boundary_box {
    height:400px; width:400px;
    overflow:hidden;
    position:relative;
    top:60px; left:50px;
    border: solid 1px #404040;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.33, rgb(228,230,216)),
        color-stop(0.49, rgb(218,230,200))  
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(228,230,216) 33%,
        rgb(218,230,200) 49%
    );
}
.draggable {
    background: rgba(210,210,220,0.7);
    border:5px solid rgba(0, 0, 0, .5);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    width: 72px;
    height: 86px;
    position: absolute;
    top:20px;
    left:120px;
    padding:10px 20px;
}

JavaScript

/*
This content is released under the MIT License.
http://opensource.org/licenses/MIT
*/

$(document).ready(function(){
   $('.draggable').draggable({scroll: false, containment: '#boundary_box'});
   $('.draggable').dragMomentum();
});

dragMoment = function() {
    var howMuch = 180;  // change this for greater or lesser momentum
    var minDrift = 2; //  minimum drift after a drag move

    var containerPadding = [10,10,10,10];  // top, right, bottom, left
    //  how near an edge can we get before the spring-back motion happens?
    //  positive numbers give a "padding" to the container (or window),
    //  negative numbers allow the dragged div to slide some distance outside

    var easeType = 'easeOutQuad';
    
    //  The standard ease types are 'linear' and 'swing'
    //  jQuery UI includes the following:  '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];

    return  {
        cPadding: containerPadding,  // top, right, bottom, left
        bounds: {},
        uid: 'dragMoID_',
        uindex: 1,
        
        setBounds: function(elemID,containment,bbWidth,bbHeight) {
            dragMoment.bounds[elemID] = [];
            if (!containment) {  // make the window the container, calibrate the boundaries
  ...