JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://localhost/programming/jsplumb-git/build/1.3.8/js/mootools.jsPlumb-1.3.8-all.js"></script>
<div class="w" id="opened">begin<div class="ep"></div></div>
<div class="w" id="olga">olga<div class="ep"></div></div>

CSS

.w { 
                width:5em;
                padding:1em;
                position:absolute;
                border: 1px solid black;
                z-index:4;
                border-radius:1em;
                 border:1px solid #346789;
box-shadow: 2px 2px 19px #e0e0e0;
   -o-box-shadow: 2px 2px 19px #e0e0e0;
   -webkit-box-shadow: 2px 2px 19px #e0e0e0;
   -moz-box-shadow: 2px 2px 19px #e0e0e0;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
cursor:move;
            }
            
            .aLabel {
                background-color:white;
                opacity:0.8;
                padding:0.3em;                
            }
            
            .ep {
                float:right;
                width:1em;
                height:1em;
                background-color:#994466;
                cursor:pointer;
            }
            
            ._jsPlumb_endpoint {
                z-index:3;
            }
        /*    ._jsPlumb_connector { border:1px solid red; }*/
            
            #opened {
                left:10em;
                top:5em;
            }
            
            #olga {
                left:10em;
                top:12em;
                width:7em;
            }

            .dragHover { border:1px dotted red; }
            
            path { cursor:pointer; }

JavaScript

jsPlumb.ready(function() {

  $$(".ep").each(function(e) {
    var p = e.getParent();
    jsPlumb.makeSource(e, {
        parent:p,
        anchor:"Continuous",
        connector:"StateMachine",
        connectorStyle:{ strokeStyle:'red',lineWidth:2 },
        maxConnections:-1,
        dragOptions:{
          onStart: function(){
            console.log("START !!!")
          },
          onSnap: function(){
            console.log("Snap !!!")
          },
          onComplete: function(){
            console.log("COMPLETE !!! ....OOPS NOT WORKING!!!")
          },
          onEnter: function(){
            console.log("ENTER !!!")
          },
          onLeave: function(){
            console.log("LEAVE !!!")
          }
        }//END dragOptions
    });
  });
  
  jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
        dropOptions:{ hoverClass:"dragHover" },
        anchor:"Continuous"            
  });
      
  jsPlumb.draggable(jsPlumb.getSelector(".w"), {
    onComplete: function(e, ui) {
      console.log("COMPLETE HEY THIS ONE WORKS!!!")
    }
  });
    
});