JSFiddle - React, Tailwind, and code Playground

by patrioticcow

HTML

<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>
<div class="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>

CSS

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

JavaScript

var $div = $('.container');

test ();

function test (){
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
}