JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://localhost/programming/jsplumb-git/build/1.3.6/js/jquery.jsPlumb-1.3.6-all.js"></script>
<div id="d1" class="d">d1</div>
<div id="d2" class="d">d2</div>

CSS

.d { border:1px solid black;width:3em;height:3em;position:absolute;}
#d1 { top:5px;left:5px; }
#d2 { top:150px;left:150px; }

JavaScript

jsPlumb.ready(function() {
    //jsPlumb.makeTarget("d2");
    jsPlumb.addEndpoint("d1",{
        isSource:true
    });
    
        jsPlumb.addEndpoint("d2",{
        isTarget:true
    });
    
    jsPlumb.bind("jsPlumbConnectionDetached", function() {
        alert("detach!");
    });
    
    jsPlumb.bind("jsPlumbConnection", function() {
  //      alert("connect!");
    });    
    jsPlumb.bind("beforeDetach", function() {
        alert("beforeDetach!");
        return true;
    });
    jsPlumb.bind("beforeDrop", function() {
    //    alert("beforeDrop!");
        return true;
    });    
    
});