JSFiddle - React, Tailwind, and code Playground

by Gökhan Kurt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="new-div">
  <span data-scale-ratio="1" class="mc" data-scale-reference="new-div">
   Add Your Text
    </span>
  <a class="closeButton"></a>
  <a class="rotateButton"></a>
  <a class="resizeButton"></a>
</div>
<div class="bord" style="z-index: -1;">

</div>

CSS

.new-div {
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 55px;
  border: 2px solid black;
  transform-origin: 0 0;
}

.closeButton {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

.resizeButton {
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 27px;
  height: 27px;
  background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
  background-size: contain;
  cursor: resize;
}

.rotateButton {
  display: block;
  position: absolute;
  top: -10px;
  left: 82px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

JavaScript

var dtr = Math.PI / 180;
    var rtd = 180 / Math.PI;
    var pi = Math.PI;

    $('.new-div').draggable();

    var dstartX, dstartY;
    $('.resizeButton').draggable({
      start: function() {

        dstartX = $('.new-div').position().left;
        dstartY = $('.new-div').position().top;
      },
      drag: function(ev, ui) {
        var rot = rotation * dtr;
        var cr = Math.cos(rot);
        var sr = Math.sin(rot);
        var x = ev.clientX - dstartX;
        var y = ev.clientY - dstartY;
        console.log(ui);
        
        var mx=cr * x + sr * y;
        var my=cr * y + sr * x;
        $('.new-div').width(mx);
        $('.new-div').height(my);
        ui.position.left=mx;
        ui.position.top=my;
      }
    });

    var rotating = false;
    var startX = 0;
    var startY = 0;
    var rotation = 0;
    jQuery.fn.rotate = function(degrees) {
      $(this).css({
        'transform': 'rotate(' + (rotation = degrees) + 'deg)'
      });
      console.log($('.new-div').position());
    };

    $(document).mousemove(function(e) {
      if (!rotating) return;
      var difX = startX - e.clientX;
      var difY = startY - e.clientY;
      $('.new-div').rotate(Math.atan2(-difY, -difX) * 180 / Math.PI);
    });

    $(document).on("mouseup", function() {
      rotating = false;
    });

    $('.rotateButton').on("mousedown", function(e) {
      e.stopImmediatePropagation();
      rotating = true;
      startX = $('.new-div').position().left;
      startY = $('.new-div').position().top;
    });