JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jsplumbtoolkit.com/js/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://jqueryte.com/js/jquery-te-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://jqueryte.com/css/jquery-te.css">
<link type="text/css" rel="stylesheet" href="http://jqueryte.com/css/jquery-te.css">

<div class= "applicationArea>">




<div class= "textDivContainer1">
<a id="handle"> Drag me</a>
<button class="textButton1">clique ici</button>
<span class="textArea1"></span>
</div>
</div>

CSS

/* general styles */
html, body {
	padding:30px 100px;
	background:#E5E5E5
}
* {
	font-family:Verdana, Arial, sans-serif;
	color:#000
}
h1 {
	font-size:33px;
	color:#99CC00;
	margin:15px 0
}
.navigation {
	margin:10px 0 20px;
}
.navigation, .navigation a {
	color:#608000;
	font-size:12px;
}
.navigation a {
	margin-right:4px;
}
h2 {
	margin:15px 0 25px;
	color:#608000;
	font-size:14px;
	font-weight:bold
}

a:link, a:visited {
	text-decoration:underline
}

.testbutton {
	margin-bottom:30px;
	background:#3399FF;
	padding:6px 25px;
	border:#003F81 1px solid;
	color:#FFF;
	font-size:22px;
	border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;
	box-shadow:inset 0 5px 5px #67B3FF; -webkit-box-shadow:inset 0 5px 5px #67B3FF; -moz-box-shadow:inset 0 5px 5px #67B3FF
}
.testbutton:hover {
	background:#198CFF;
	cursor:pointer
}
.footer, .footer * {
	color:#802D00;
	font-size:15px
}

.jqte-test {
	display:block;
	margin:0 0 10px;
	padding:6px;
	width:80%;
	background:#FFF;
	border:#AAA 1px solid;
	font-size:13px;
}
textarea.jqte-test, div.jqte-test, span.jqte-test {
	min-height:50px;
}
button {
position:relative;
	display:block;
	margin:10px 0;
	padding:2px 0 4px;
   top:10px;
   height:10px;
	width:20px;
	background:#658700;
	border:#526E00 1px solid;
	color:#F3FFCF !important;
	text-align:center;
	font-size:13px;
	font-weight:bold;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
	box-shadow:0 0 2px #000, inset 0 1px 1px #99CC00; -webkit-box-shadow:0 0 2px #000, inset 0 1px 1px #99CC00; -moz-box-shadow:0 0 2px #000, inset 0 1px 1px #99CC00;
	cursor:pointer;
}
button:hover {
	background:#78A000;
	border-color:#658700;
	text-decoration:none !important;
	cursor:pointer
}

button:active {
	background:#3F5500;
	border-color:#2C3C00;
	color:#9CCD00 !important;
	box-shadow:0 0 3px #000,inset 0 -2px 2px #333;
	-webkit-box-shadow:0 0 3px #000, inset 0 -2px 2px #333;
	-moz-box-shadow:0 0 3px #000, inset 0 -2px 2px #333;
}

.textDivContainer1{
 	 ...

JavaScript

$(document).ready(function() {
    
    
	$('.textArea1').jqte({"source":false});
	// settings of status
	var toggleState1 = true;
	$(".textButton1").click(function(){
		toggleState1 = toggleState1 ? false : true;
		$('.textArea1').jqte({"status" : toggleState1})
	});
	

jsPlumb.bind("ready", function() {


var dragToggle = null ;
	$(".textButton1"). mousedown(function(){
	
		if (dragToggle===null){
		dragToggle = '.textDivContainer1';  
		
		}
		
		else if (dragToggle === '.textDivContainer1'){
		dragToggle=null;
		}
		
		console.log(dragToggle);
						
			
		jsPlumb.draggable($(dragToggle), { snap: true});
		
		
		});
    
        //Setting up drop options
    var targetDropOptions = {
            tolerance:'touch',
            hoverClass:'dropHover',
            activeClass:'dragActive'
    };
    
    //Setting up a Target endPoint
    var targetColor = "orange";
    var targetEndpoint = {
       endpoint:["Rectangle", { width:25,height:11}],
       paintStyle:{ fillStyle:targetColor},
       //isSource:true,
       scope:"orange dot",
       connectorStyle:{ strokeStyle:targetColor, lineWidth:8 },
       connector: ["Bezier", { curviness:0 } ],
       maxConnections:1,
       isTarget:true,
       dropOptions : targetDropOptions
    };
    
    //Setting up a Source endPoint
    var sourceColor = "orange";
    var sourceEndpoint = {
       endpoint:["Dot", { radius:5}],
       paintStyle:{ fillStyle:sourceColor},
       isSource:true,
       scope:"orange dot",
       connectorStyle:{ strokeStyle:sourceColor, lineWidth:3, },
       connector: ["Flowchart", { curviness:0 } ],
       maxConnections:1,
       //isTarget:true,
       //dropOptions : targetDropOptions
    };
    
    
    //Set up endpoints on the divs
		jsPlumb.addEndpoint($(".textDivContainer1") , { anchor:"TopCenter" }, targetEndpoint);

		jsPlumb.addEndpoint($(".textDivContainer1") , { anchor:"BottomCenter" }, sourceEndpoint);
	
		   

        
    jsPlumb.draggable($(".textDivContainer1"), {...