JSFiddle - React, Tailwind, and code Playground

by Carlos Diógenes

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<body>
    <div id="parent">
        <div id="draggable">
            Hello!
        </div>
    </div>
</body>

CSS

#parent {
    background-color: blue;
    width: 400px;
    height: 400px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: center top 0px;
    -moz-transform-origin: center top 0px;
    -webkit-transform-origin: center top 0px;
}

#draggable {
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    width: 50px;
    height: 50px;
    color: white;
}

JavaScript

var dragFix, startFix, stopFix;

window.myApp = {
  layout: {
    zoomScale: 0.8
  },
  draggable: {
    _uiHash: function() {
      return {
        helper: this.helper,
        position: this.position,
        originalPosition: this.originalPosition,
        offset: this.positionAbs,
        containment: this.containment
      };
    }
  },
  resizable: {
    _change: {
      e: function(event, dx) {
        return {
          width: this.originalSize.width + dx / myApp.layout.zoomScale
        };
      },
      w: function(event, dx) {
        var cs, sp;
        cs = this.originalSize;
        sp = this.originalPosition;
        return {
          left: sp.left + dx,
          width: cs.width - dx / myApp.layout.zoomScale
        };
      },
      n: function(event, dx, dy) {
        var cs, sp;
        cs = this.originalSize;
        sp = this.originalPosition;
        return {
          top: sp.top + dy,
          height: cs.height - dy / myApp.layout.zoomScale
        };
      },
      s: function(event, dx, dy) {
        return {
          height: this.originalSize.height + dy / myApp.layout.zoomScale
        };
      }
    },
    plugins: {
      containment: {
        resize: function(event) {
          var ce, co, continueResize, cop, cp, hoset, isOffsetRelative, isParent, o, pRatio, that, woset;
          woset = void 0;
          hoset = void 0;
          isParent = void 0;
          isOffsetRelative = void 0;
          that = $(this).resizable("instance");
          o = that.options;
          co = that.containerOffset;
          cp = that.position;
          pRatio = that._aspectRatio || event.shiftKey;
          cop = {
            top: 0,
            left: 0
          };
          ce = that.containerElement;
          continueResize = true;
          if (ce[0] !== document && /static/.test(ce.css("position"))) {
            cop = co;
          }
          if (cp.left < (that._helper ? co.left : 0)) {
            that.size.width = that.size.width...