JSFiddle - React, Tailwind, and code Playground

by KendoDev

JavaScript

var box1 = { 
    name:"Box1",
    position: {
        xValue:50,
        yValue:100
    },
    size: {
         height:70,
         width:60
    },   
    color:"blue"
};
var box2 = { 
    name:"Box2",
    position: {
        xValue:350,
        yValue:300
    },
    size: {
         height:70,
         width:60
    },     
    color:"green"
};
DrawBox(box1);
DrawBox(box2);
DrawLine();
function DrawLine() { // when dragging invoke this method
    var noOfPaths = 3; // set this value based on the position of two boxes 
    var pos = []; // this array has to be populated when dragging
    pos.push({x1:100,y1:130,x2:200,y2:130});    
    pos.push({x1:200,y1:130,x2:200,y2:330});
    pos.push({x1:200,y1:330,x2:350,y2:330});
    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.style.height = 1000+"px";
    svgElement.style.width = 1000+"px";      
    for (var i = 0; i< noOfPaths; i++)
    {
        var linePath = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            linePath.setAttribute('x1', pos[i].x1);
            linePath.setAttribute('y1', pos[i].y1);
            linePath.setAttribute('x2', pos[i].x2);
            linePath.setAttribute('y2', pos[i].y2);
            linePath.style.stroke = "red";
            linePath.style.strokeWidth = 4;
           svgElement.appendChild(linePath);
    }
    document.body.appendChild(svgElement);
}

function DrawBox(options) {
    var element = document.createElement("div");
    element.id = options.name;
    element.style.position = "absolute";
    element.style.left = options.position.xValue+"px";
    element.style.top = options.position.yValue+"px";  
    element.style.height = options.size.height+"px";
    element.style.width = options.size.width+"px";
    element.style.background = options.color;
    document.body.appendChild(element);
}