JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="selectable1">
<span class="drag" style="position: absolute; top: 100px; left: 145px; font-size: 34px; font-family: 'adage-script-1','adage-script-2'; color: rgb(245, 5, 17); text-shadow: -2px 1px 2px rgb(51, 51, 51); -moz-transform: rotate(300deg); -webkit-transform: rotate(300deg); z-index: 95;">Span 3x</span>
<span class="drag" style="position: absolute; top: 185px; left: 145px; font-family: Georgia; font-size: 24px; color: rgb(0, 0, 0); word-spacing: 0px; z-index: 98; width: 100px; text-align: left; opacity: 1;">Span1</span>
<span class="drag" style="position: absolute; top: 230px; left: 145px; font-family: Times New Roman; font-size: 24px; color: rgb(0, 0, 0); word-spacing: 0px; z-index: 98; width: 100px; text-align: left; opacity: 1;">Span2</span>
</div>

CSS

#selectable1 {
width:400px;
height:400px;
border: 1px dotted #333}

.ui-selected {
    border-bottom: 1px dotted #333;
    cursor:move;
}

JavaScript

$('#selectable1').bind('dragSetup', function() {
 
  var selected = $([]), offset = {top:0, left:0};
    
    $('#selectable1 span.drag').draggable({
                start: function(ev, ui) {
                $(this).is("#selectable1 span.ui-selected") || $("#selectable1 span.ui-selected").removeClass("ui-selected");
                selected = $("#selectable1 span.ui-selected").each(function() {
                var el = $(this);
                el.data("offset", el.offset());
                    
                });

                offset = $(this).offset();

            },
            
            drag: function(ev, ui) {

                var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;

                selected.not(this).each(function() {
                    var el = $(this), off = el.data("offset");
                    el.css({top: off.top + dt, left: off.left + dl});
                });
            },
    });
    
});

$('#selectable1').trigger('dragSetup');
$("#selectable1").selectable();