JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="static">Static</div>
    
    <div class="box">
        <div class="box-line"></div>
        <div class="box-handle">
            Oh, pick me!
            <div class="arrow"></div>        
        </div>
    </div>
    
    <div class="box">
        <div class="box-line"></div>
        <div class="box-handle">
            Oh, pick me!
            <div class="arrow"></div>
        </div>
    </div>
</div>

CSS

.container {
    background:#dfdfdf;
    width:400px;
    height:400px;
}
.box-handle, .static {
    text-align:center;
    font-size:9px;
    line-height:100px;
    width:100px;
    height:100px;
    background:#efefef;
    border:1px solid #bfbfbf;
}
.box-line {
    position:absolute;
    top:50px; 
    left:110px;
    z-index:0;
}
.box-handle {
    z-index:1000;
    cursor:move;
}
.arrow {
    display:none;
    position:absolute;
    width:10px;
    height:10px;
    background:red;
}

JavaScript

$(document).ready(function () {
    
    $( ".box-handle" ).draggable({ 
        containment: ".container", 
        scroll: false, 
        drag: function () { /* While dragging check for stuff */
            
            var box = $(this);
            var boxPosition = box.position();
            box.find('.arrow').show();
            
            if (boxPosition.left >= 90)
            {
                // In the parent div called ".box" find ".box-line"
                box.closest('.box').find('.box-line').css({
                    'top':'50px', /* Put top left corner of ".box-line" a the edge of ".static" */
                    'left':'110px',
                    'width': boxPosition.left - 60, /* Put bottom right corner of ".box-line" a the edge of current dragged box */
                    'height': boxPosition.top + 50,
                    'border':'none',
                    'border-top':'1px solid #bfbfbf',
                    'border-right':'1px solid #bfbfbf'
                });
                /* place the arrow*/
                box.find('.arrow').css({
                    'top':'-10px',
                    'left':'45px'
                });
            }
            else if (boxPosition.left < 90)
            {
                box.closest('.box').find('.box-line').css({
                    'top':'110px',
                    'left':'50px',
                    'width': boxPosition.left,
                    'height': boxPosition.top - 60,
                    'border':'none',
                    'border-left':'1px solid #bfbfbf',
                    'border-bottom':'1px solid #bfbfbf'
                });
                box.find('.arrow').css({
                    'top':'45px',
                    'left':'-10px'
                });
            }
        }
    });
    
    
});