JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<div id='c1' style="z-index:2;" class="circle">DRAG</div>
<div class="circle" id='c2' style="left:150px;">DROP</div>
<div id='c3' style="left:300px;">OBJ</div>

CSS

div{
background-color: #37A047;
height:100px;position:absolute;
width:100px;
text-align:center;
color:white;
line-height: 100px;
font-weight: bold;
font-size: 22px;
font-family: sans-serif;
}
.circle {
background-color: #37A047;
height:100px;float:left;
width:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
text-align:center;
color:white;
line-height: 100px;
font-weight: bold;
font-size: 22px;
font-family: sans-serif;
}

JavaScript

// JSPLUMB REVERT DRAG
$(document).ready(function(){
    var revTest=false;
    var options = {
                revert: function(socketObj){
                if(socketObj === false){ //when circle is not over circle 
                    revTest = false; //we don't want to revert
                    return false;
                }else{    //when circle is over circle
                     revTest = true; //revert the action
                     return true;
                }
            },
            scope:"Circle",
            stop: function(e , ui){
                   if(revTest === true){
                      jsPlumb.repaint($(this));
                   }
            }
        };
        jsPlumb.draggable("c1",options);
        $("#c2").droppable({
            scope:"Circle",
            tolerance:"touch"
        });
    jsPlumb.connect({source:"c1",target:"c3"});
});