JSFiddle - React, Tailwind, and code Playground

by saurabh97

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

 

<svg height="200" width="500">
        <polyline id="line" points="0,0 0,0 0,0" style="fill:none;stroke:black;" />
        </svg>

CSS

.box {
  border: 1px solid black;
  background-color: #ccc;
  width: 100px;
  height: 100px;
  position: absolute;
}


#box1 {
  top: 0;
  left: 0;
}

#box2 {
  top: 200px;
  left: 0;
}

JavaScript

const $b1 = $("#box1");
const $b2 = $("#box2");
const $line = $("line");

let points = line.points;
let first = points.getItem(0);
let middle = points.getItem(1);
let last = points.getItem(2);

debugger;
const padding = 7;
const coordinates = function() {
  const x1 = $b1.offset().left + $b1.width()/2-padding;
  const y1 = $b1.offset().top + $b1.height()/2-padding;
  const x2 = $b2.offset().left + $b1.width()/2-padding;
  const y2 = $b2.offset().top + $b1.height()/2-padding;
let box2 = document.getElementById("box2").getBoundingClientRect();
  let box1 = document.getElementById("box1").getBoundingClientRect();

/*   $line.attr("x1", x1);
  $line.attr("y1", y1); 
  $line.attr("x2", x2);
  $line.attr("y2", y2); */
  
/* first.x = x2;
first.y = y2;
  last.x = x1;
  last.y = y1;
    let length = Math.sqrt(Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2));
middle.x = first.x + length / 2;
  middle.y = (first.y > last.y) ? last.y : first.y; */
  
  
  first.x = box2.x + box2.width / 2;
first.y = box2.y;
 last.x = box1.x;
  last.y = box1.y + box1.height / 2;
  let length = Math.sqrt(Math.pow(first.x - last.x, 2) + Math.pow(first.y - last.y, 2));
  middle.x = first.x + length / 2;
  middle.y = (first.y > last.y) ? last.y : first.y;

}
coordinates();


$('#box1').draggable({
  drag: coordinates
});