JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
    <div class="draggable">Drag me</div>
</div>

CSS

#container {
    background-color:grey;
    width:250px;
    height:250px;
    position:relative;
    -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   transform-origin: 0 0;
   -ms-transform-origin: 0 0;
}
.draggable {
    background-color:red;
    display:inline;
    position:absolute;
    top:10px;
    left:10px;
}

JavaScript

/* 
    Fixes that are needed to make draggable's work a scaled container.
    Scroll down for the start of the code
*/
$.ui.ddmanager.prepareOffsets = function (t, event) {
    var i, j, m = $.ui.ddmanager.droppables[t.options.scope] || [],
        type = event ? event.type : null,
        list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack();
    droppablesLoop: for (i = 0; i < m.length; i++) {
        if (m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0], (t.currentItem || t.element)))) {
            continue;
        }
        for (j = 0; j < list.length; j++) {
            if (list[j] === m[i].element[0]) {
                m[i].proportions().height = 0;
                continue droppablesLoop;
            }
        }
        m[i].visible = m[i].element.css("display") !== "none";
        if (!m[i].visible) {
            continue;
        }
        if (type === "mousedown") {
            m[i]._activate.call(m[i], event);
        }
        m[i].offset = m[i].element.offset();
        m[i].proportions({
            width: m[i].element[0].offsetWidth * percent,
            height: m[i].element[0].offsetHeight * percent
        });
    }
};

function dragFix(event, ui) {
    var changeLeft = ui.position.left - ui.originalPosition.left,
        newLeft = ui.originalPosition.left + changeLeft / percent,
        changeTop = ui.position.top - ui.originalPosition.top,
        newTop = ui.originalPosition.top + changeTop / percent;
    ui.position.left = newLeft;
    ui.position.top = newTop;
}

function startFix(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
}

/* Start of code */
var percent = 1.5,
    containmentArea = $("#container");
$("#container").css({
    'transform': 'scale(' + percent + ')',
    '-moz-transform': 'scale(' + percent + ')',
    '-webkit-transform': 'scale(' + percent + ')',
    '-ms-transform': 'scale(' + percent + ')'
})

$(".draggable").draggable({
    cursor: "move",
    start: startFix,
  ...