JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moveable/0.27.3/moveable.min.js"></script>
<div class="container">
  <div class="simple-element" id="one">
    Heloo I am a simple element
  </div>
  
<div class="group-element" id="two">
  
    <div class="simple-element">
    Hello inside group 1
    
    </div>
    <div class="simple-element" style="top: 100px; width:200px">
    hello inside group 2
  
    </div>
  </div>

  


</div>

CSS

.container {
  position: absolute;
  width: 98vw;
  height: 50vh;
  background: lightblue;
}

.simple-element,
.group-element{
  position: absolute;
  border: 1px solid red;
}

.group-element {
  width: 300px;
  height: 200px;
}

.simple-element {
  top: 0px;
  left: 0px;
  width: 150px;
  height: 100px;
}

TypeScript

const parentElement = document.querySelector('.container') as HTMLElement;
 const single = document.getElementById('one');
 const groupMain = document.getElementById('two');
 const groupElements = [groupMain, ...Array.from(document.querySelectorAll('.group-element .simple-element'))];

function setupGroupMoveable(){


 const moveableGroup = new Moveable(parentElement, {
   target: groupElements,
   defaultGroupRotate: 0,
   defaultGroupOrigin: '50% 50%',
   draggable: true,
   resizable: true,
   rotatable: true,
   throttleDrag: 0,
   startDragRotate: 0,
   throttleDragRotate: 0,
   origin: false,
   groupable: true,
   keepRatio: true,
   renderDirections: ['nw', 'ne', 'sw', 'se'],
    snapThreshold: 4,
   snappable: true,
   snapElement: true,
   isDisplaySnapDigit: false,
   snapCenter: true,
   elementGuidelines: [single],
   verticalGuidelines: [
     0,
     parentElement.clientWidth * 0.5,
     parentElement.clientWidth,
   ],
   horizontalGuidelines: [
     0,
     parentElement.clientHeight * 0.5,
     parentElement.clientHeight,
   ],
    snapDirections: true,
 });
 // snap center
moveableGroup.snapDirections = { left: true, top: true, right: true, bottom: true, center: true, middle: true };

 const groupFrames: Array < MoveableFrame > = [{
     translate: [0, 0],
     rotate: 0
   },
   {
     translate: [0, 0],
     rotate: 0
   },
   {
     translate: [0, 0],
     rotate: 0
   }
 ];

moveableGroup.on('dragGroupStart', (event) => {
 	const {events} = event;
       events.forEach((ev, i) => {
         ev.set(groupFrames[i].translate);
       });
     })
    .on('dragGroup',(ev) => {
     const {events} = ev;
       const [event] = events;
       const [frame] = groupFrames;
				frame.translate = event.beforeTranslate;
       const [translateX, translateY] = frame.translate;
      groupMain.style.transform = 'translate(' + translateX + 'px,' + translateY + 'px)';
       
     });
}


function setupSimpleMoveable(){

	const snapOptions: MoveableOptions...