JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cmrdemo.com/websites/partnerportal/template/components/js/jquery.js"></script>
<script src="http://cmrdemo.com/websites/partnerportal/template/components/js/jquery-ui-1.11.2.js"></script>
<div class="main">
    <div class="tbl">
        <div class="cell cleft">
            test
        </div>
        <div class="cell cright">
            <div class="main">
                <div class="tbl">
                    <div class="cell left">
                        <div class="scroll">
                            <div class="drop"></div>
                        </div>
                    </div>
                    <div class="cell right">
                        <div class="scroll">
                            <div class="drag">drag</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body { overflow:hidden;}
.main {  position:absolute; top:0; right:0; bottom:0;left:0;}
.tbl { display:table; width:100%; height:100%;}
.cell { display:table-cell; position:relative;}
.left { width:80%;}
.right { text-align:center;}
.cleft{ width:10%;}
.scroll { overflow-y:auto; position:absolute; top:0; right:0; bottom:0;left:0; background-color:#f8f8f8;}
.drop { border:1px solid #ccc; background-color:#eee; padding:10px; width:300px; margin:0 auto;}
.drag { width:100px; height:50px; text-align:center; background-color:#ccc;}
.ui-sortable-placeholder { padding:20px; border:1px solid #ccc; background-color:#fff;}

JavaScript

// jquery-2.1.1
// jquery-ui-1.11.2
// when drag in drop area and drag out, the drag jump away with the cursor


$('.drag').draggable({
    helper: 'clone',
    cursor: "move",
    cursorAt: {left: 40},
    zIndex: 9999,
    appendTo: "body",
    connectToSortable: '.drop'
});

$('.drop').sortable({  
    cursor: "move",
    placeholder: 'ui-sortable-placeholder'
});