JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  
    
    
    
    
 
  
  <div id="wrapper">
 
  
    <div id="start" class="item"></div>
    <div id="end" class="item"></div>
      
      <div id="dragbutton" class="item">
          Click to start endpoint drag
          
      </div>
</div>

CSS

.item {
  border: 1px solid black;
  background-color: #ddddff;
  width: 100px;
  height: 100px;
    position:absolute;
}
      
#start {
  left: 100px;
  top: 100px;
}
      
#end {
  left: 250px;
  top: 100px;
}

#dragbutton {
    background-color: #ddffdd;
    
    
}

#wrapper {
    width:800px;
    height:800px;
    border:1px solid black;
    position:relative;
}

JavaScript

$(function() {

    
    jsPlumb.ready(function() {
       var jsp = jsPlumb.getInstance();
        jsp.draggable($("#start"));
        jsp.draggable($("#end"));
        
        var endpoint = jsp.addEndpoint($("#start"), {
            isSource:true
        });
        
        jsp.addEndpoint($("#end"), {
            isTarget:true
        }); 
        
        $("#dragbutton").bind("mousedown", function(e) {
            
            $(document).bind("mousemove.adjust", function(e) {
                
                var left = e.offsetX;
                var top = e.offsetY;
                $(endpoint.canvas).css({"left":left, "top":top});
                $(document).unbind("mousemove.adjust");
            });
            
            $(endpoint.canvas).trigger(e)
        })
        
        
    })
    
   
    
})