JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<div id="container"></div>

CSS

#container {  
    width:900;
    height:600;
	position:absolute;
}

JavaScript

var stage = new Kinetic.Stage({
    container: "container",
    width: 900,
    height: 600
});
var leftLayer = new Kinetic.Layer({
    x:0,
    y:0,
    id: 'leftLayer',
    width:250,
    height:600
});
var leftBackground = new Kinetic.Rect({
    width: 250,
    height: 600,
    stroke: "red"
    });
leftLayer.add(leftBackground);
stage.add(leftLayer);

var rightLayer = new Kinetic.Layer({
    x: 280,
    y:0,
    id: 'rightLayer',
    width:600,
    height:600
});
var rightBackground = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 600,
    height: 600,
    stroke: "green"
    });
rightLayer.add(rightBackground);
stage.add(rightLayer);

//draw a room
var room = new Kinetic.Rect({
    width: 100,
    height: 100,
    fill: 'cornsilk',
    stroke: 'black',
    strokeWidth: 3,
    dragOnTop: false
});

var window = new Kinetic.Rect({
    x: 30,
    y: 250,
    width: 40,
    height: 4,
	name: 'window',
	id: "window_ID",
    fill: '#ccc',
    stroke: 'black',
    strokeWidth: 1
});

var rooms = [];
var id = 0

var group = new Kinetic.Group({
    x: 10,
    y: 100,
    width: 100,
    height: 100,
    id: id++
});
group.add(room);
leftLayer.add(group);
leftLayer.add(window);
stage.draw();

group.on('mousedown touchstart', function(e){
    if (e.which != 3) {
    var cloneOfItem= group.clone({added: false, id: id++});
    cloneOfItem.setDraggable(true);
    cloneOfItem.off('mousedown touchstart');
    leftLayer.add(cloneOfItem);

    cloneOfItem.dragBoundFunc(dragBoundCarre);
        
    cloneOfItem.on('dragmove', function(){
        this.moveToTop();
    });
    cloneOfItem.on('dragend', function(){
        var userPos = stage.getPointerPosition();
        if (userPos.x>280 && userPos.y>0 && !this.getAttr('added'))
        {
            this.setAttr('added', true);
            this.x(this.x() - 280);
            this.moveTo(rightLayer);
            rooms.push(this);
        }
        else if (userPos.x<280)
        {
            this.destroy();
           ...