JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<button>Reseteaza</button>
<ul id="flowEditor" style="width: 100%; height: 480px; border: 3px double gold;">
    <li class="ui-corner-all" style="position: absolute; left: 17px; top: 31px;">
        <span class="caption">Item 1</span>
        <img class="move" />
        <span class="ui-corner-all anchor anchor-top"></span>
        <span class="ui-corner-all anchor anchor-left"></span>
        <span class="ui-corner-all anchor anchor-right"></span>
        <span class="ui-corner-all anchor anchor-bottom"></span>
    </li>
    <li class="ui-corner-all" style="position: absolute; left: 170px; top: 31px;">
        <span class="caption">Item 2</span>
        <img class="move" />
        <span class="ui-corner-all anchor anchor-top"></span>
        <span class="ui-corner-all anchor anchor-left"></span>
        <span class="ui-corner-all anchor anchor-right"></span>
        <span class="ui-corner-all anchor anchor-bottom"></span>
    </li>
</ul>

CSS

#flowEditor {
  list-style-type: none;
  padding: 0px;
  height: 640px;
  box-sizing: border-box;
  border: 3px double gold;
}
#flowEditor li {
  width: 100px;
  height: 100px;
  margin: 4px;
  border: 1px solid wheat;
}
#flowEditor li span.caption {
  display: block;
  margin-top: 40px;
  height: 36px;
  text-align: center;
}
#flowEditor>li {
  background-color: white;
}
#flowEditor {
  position: relative;
}
#flowEditor li span.anchor {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid blue;
  z-index: -1;
  cursor: pointer;
}
#flowEditor li:hover span.anchor {
  z-index: 999999;
}
#flowEditor li:hover span.anchor.active {
  z-index: 999999;
  border-color: green;
}
#flowEditor li:hover span.anchor.hover {
  z-index: 999999;
  background-color: green;
}
#flowEditor li span.anchor:hover {
  background-color: blue;
}
#flowEditor li span.anchor.context {
  background-color: red;
}
#flowEditor li span.anchor-top {
  top: -6px;
  left: calc(50% - 6px);
}
#flowEditor li span.anchor-left {
  left: -6px;
  top: calc(50% - 6px);
}
#flowEditor li span.anchor-right {
  right: -6px;
  top: calc(50% - 6px);
}
#flowEditor li span.anchor-bottom {
  bottom: -6px;
  left: calc(50% - 6px);
}

JavaScript

$(function() {
    $("#flowEditor").disableSelection();
    $("button").on("click", function() {
        $("span.anchor").css("border-width", "2px");
    });
    $("span.anchor").draggable({
        helper: "clone",
        accept: "span.anchor",
        containment: "#flowEditor",
        cursorAt: { top: -10, left: -10 },
        start: function(event, ui) {
            $(ui.helper).css("z-index", "9999999");
            $(ui.helper.context).addClass("context");
        },
        stop: function(event, ui) {
            $(ui.helper.context).removeClass("context");
            $(ui.helper.context).css("border-width", "5px");
        }
    }).droppable({
        accept: "span.anchor",
        activeClass: "active",
        hoverClass: "hover",
        drop: function(event, ui) {
            $(this).css("border-width", "5px");
        }
    });
});