JSFiddle - React, Tailwind, and code Playground

by trustweb

HTML

<script src="http://www.kineticjs.com/download/v4.0.4/kinetic-v4.0.4.min.js"></script>
<button id="clear">Cancella</button>
<button id="save">Save</button>
<div id="container" ></div>

CSS

body {
        margin: 0px;
        padding: 0px;
    }
    #container { position: relative; width:980px; height:600px; margin:auto;}
    canvas {
        border: 1px solid #9C9898; width:958px; height:598px;}
    }

JavaScript

/***DRAG&DROP ITEMS ***/
    var overitem=0;
    var start = null;
    
    function bindGroupEvents(group, rect, trash) {
        group.on('mouseover', function() {

          overitem=1;
          if(group.getStage()) {
            trash.moveTo(group);
            trash.show();
            trash.getLayer().draw();
            document.body.style.cursor = 'pointer';
          }
        });
        
        group.on('mouseout', function() {
          trash.hide();
          trash.getLayer().draw();
          document.body.style.cursor = 'default';
          overitem=0;
        });
        
        group.on('dragmove', function() {
          if(start) {
            var rect = group.get('.rect')[0];
            rect.setWidth(start.rectWidth + group.getX() - start.groupX);
            rect.setHeight(start.rectHeight + start.groupY - group.getY());
            group.setX(start.groupX);
            trash.setX(rect.getWidth() - 24);
            // draw shapes layer and handle layer
            trash.getStage().draw();
          }
        });
        
        group.on('dragstart', function() {
          /*
          if(group.getId()=='dryer' || group.getId()=='washing' )
          {
            alert('to be cloned');
            }
        */
          group.moveToTop();
        });
    }
    
    
    function bindTrashEvents(trash) {
        trash.on('mouseover', function() {
            
          console.log('over');
          
          var group = trash.getParent();
          var rect = group.get('.rect')[0];
          start = {
            groupX: group.getX(),
            groupY: group.getY(),
            rectWidth: rect.getWidth(),
            rectHeight: rect.getHeight()
          };
        });
        
        trash.on('mouseout', function(){
          start = null;
        });
        
        trash.on('click', function() {
            //alert('click');
            
            trash.getParent().transitionTo({
                opacity: 0,
               ...