JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="wrap-outer">
  <div id="wrap-inner">
    <div class="elements">
      <div class='element text' style="width:200px;transform: translate3d(100px, 80px ,0px) rotate(30deg);">
        <div class="inner-text">sss ss I'mfdgfdg <span style="font-size:40px;">sadfsadsa</span> sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
      </div>
      <div class='element text' style="width:300px;transform: translate3d(100px, 340px ,0px) rotate(0deg)">
        <div class="inner-text">sss ss I'mfdgf sjdsaidj sdk dasd k sadopskaf kpsoadk ijfdk jod sadsassads</div>
      </div>
    </div>

    <div id="handles_manager">
      <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
      <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
    </div>

  </div>
</div>

CSS

#wrap-outer {
  padding-top: 30px;
}

#wrap-inner {
  position: absolute;
}

.elements {
  position: absolute;
  overflow: hidden;
  border: 3px solid #ebeced;
  background-color: #fff;
  width: 500px;
  height: 500px;
  border: 1px solid blue;
}

.elements .element:hover {
  cursor: pointer;
}

.element {
  min-height: 30px;
  position: absolute;
}

.element .inner-text {
  word-break: break-all;
}

.elements .text {
  z-index: 9;
}

#egrip,
#wgrip {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 1px solid #000000;
  position: absolute;
  cursor: pointer;
}

#srgrip {
  bottom: -30px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#wgrip {
  left: -7px;
  top: 50%;
}

#egrip {
  right: -7px;
  top: 50%;
}

#handles_manager {
  z-index: 1;
  min-height: 5px;
  visibility: hidden;
  padding: 5px 10px;
  border: 2px dotted #ccc;
  position: absolute;
}

.elements .element,
.elements .inner-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

/* ------------------------ RESIZABLE ISSUE IN THIS PART ------------------------ */

var resizable_texts = document.getElementsByClassName('text');
for (var i = 0; i < resizable_texts.length; i++) {
  var resizable_text = resizable_texts[i];
  resizable_text.addEventListener('mousedown', showTextHandles);
}

$('#handles_manager').resizable({
  handles: {
    'e': '#egrip',
    'w': '#wgrip',
  }
});

// Show handles onclick
function showTextHandles(e) {
  move = $(this); // for JQuery
  move_resize = this; // for pure Javascript
	
  var move_offset_left = move.position().left;
  // get translate3d(..px, ..px, 0px)
  matrix = matrixToArray(move.css("-webkit-transform"));
  x = matrix[4].replace(/px/gi, '');
  y = matrix[5].replace(/px/gi, '');

  // Get div rotation angle
  var angle = elementAngle(this);
  
  move.css({
		'padding':'0px',
  });
  // Show handles_manager
  $('#handles_manager').css({
    // handlers resize position
    'transform': 'translate3d(' + x + 'px, ' + y + 'px, 0px) rotate(' + angle + 'deg)',
    'height': this.children[0].offsetHeight, // set height of div
    'width': this.children[0].offsetWidth, // set width of div
    'visibility': 'visible', // make handlers appear
    'top': '-4px', // ajust for design
    'left': ('-13') + 'px' , // adjust for design
  });

  $('#egrip').mousedown(function(e) {
    $('#handles_manager').resize(function(e) {
      var handles_left = this.offsetLeft;
      var handles_width = this.offsetWidth; // Get Width
      var handles_height = move_resize.offsetHeight; // Get Height 

      $(this).css({
        'height': handles_height + 'px',
      });

      move.css({
        'width': (handles_width - 20) + 'px',
        'transform': 'translate3d(' + (parseInt(x) + handles_left) + 'px,' + y + 'px, 0px)  rotate(' + angle + 'deg)',
        'padding':'10px',
      });
    });
  });

  $('#wgrip').mousedown(function(e) {
    $('#handles_manager').resize(function(e) {
    	var handles_left = this.offsetLeft;
 ...