JSFiddle - React, Tailwind, and code Playground

by AlphaCrack

HTML

<script src="http://rawgit.com/taye/interact.js/master/interact.js"></script>
<input id="scale" type="button" value="Scale"/><br/><br/>
<div id="wrapper">
    <div id="drag-me" class="draggable">
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>

CSS

#wrapper {
    width: 80%;
    height: 300px;
    background-color: #202020;
    margin-left: 50px;
}

#drag-me {
  width: 80px;
  height: 40x;
  background-color: #29e;
    position: absolute;
    margin-top: 150px;
}

JavaScript

// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },

    // call this function on every dragmove event
    onmove: function (event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  });

$("#scale").click(function(){
    $("#drag-me").animate({"width":2*$("#drag-me").width(),"height":2*$("#drag-me").height()},300);
});