JSFiddle - React, Tailwind, and code Playground

by brainsengineering

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<div id="line1" class="lines">
<div id="block1" class="blocks">
  <div class="resize-handle resize-left"></div>

<div class="content">
 Drag and resize me!
</div>
  <div class="resize-handle resize-right"></div>
 
</div>
</div>

CSS

.blocks {
  width: 250px;
  background-color: #29e;
  color: #fff;
  font-size: 12px;
  font-family:arial;
  border-radius: 4px;
  padding: 0px;
  margin: 0;
  touch-action: none;  
  box-sizing: border-box;
  position:relative;
}
.blocks .content{text-align:center;padding:4px;}
.lines{
  padding:2px;
  width:100%;
  background:#eee;
}
.resize-handle{background-color:#17e;width:10px;height:20px;
  border-radius: 4px;position:absolute;}
  .resize-right {right:0px;top:0;}

JavaScript

var element = document.getElementById('block1'),
    x = 0, y = 0;

interact(element)
  .draggable({
    snap: {
      targets: [
        interact.createSnapGrid({ x: 30, y: 30 })
      ],
      range: Infinity,
      relativePoints: [ { x: 0, y: 0 } ]
    },
    inertia: true,
    restrict: {
      restriction: element.parentNode,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
      endOnly: true
    }
  })
  .on('dragmove', function (event) {    
  var target = event.target;
    x = event.clientX  - target.offsetWidth/2;
    event.target.style.webkitTransform = event.target.style.transform = 'translate(' + x + 'px)';
    target.setAttribute('data-x', x);
  }).resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: false, top: false },

    // keep the edges inside the parent
    restrictEdges: {
      outer: 'parent',
      endOnly: true,
    },

    // minimum size
    restrictSize: {
      min: { width: 100, height: 50 },
    },

    inertia: true,
  })
  .on('resizemove', function (event) {
    var target = event.target,
    	x = (parseFloat(target.getAttribute('data-x')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('title', 'Size: ' + Math.round(event.rect.width) + 'x' + Math.round(event.rect.height));
  });