jsPlumb draggable XML mapper

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.0.7/jsPlumb.min.js"></script>
<div id="page-body">
  <div id="canvas">
    <div class="canvas-container" id="input-container">
      <div class="scroll-box ui-widget-content">
        <div class="scroll-box-title" id="input-structure-title">Input</div>
        <div id="input-structure"></div>
        <div class="leaf in-leaf "> in-elem1</div>
        <div class="leaf in-leaf " id="eg1">in-elem2</div>
      </div>
    </div>
    <div class="canvas-container" id="output-container">
      <div class="scroll-box ui-widget-content">
        <div class="scroll-box-title" id="output-structure-title">Output</div>
        <div id="output-structure"></div>
        <div class="leaf out-leaf ">out-elem1</div>
        <div class="leaf out-leaf " id="eg2">out-elem2</div>
      </div>
    </div>
  </div>
</div>

CSS

#page-body {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#canvas {
  border: 2px solid black;
  margin: 50px auto;
  padding: 10px;
  width: 80%;
  overflow: auto;
}


/*two canvas containers for each input and output*/

.canvas-container {
  text-align: center;
  margin: 0 auto;
  height: 800px;
  width: 50%;
}

#input-container {
  float: left;
}

#output-container {
  float: right;
}


/*where the file structure will be loaded*/

.scroll-box {
  height: 300px;
  width: 40%;
  font: 16px/26px Georgia, Garamond, Serif;
  text-align: left;
  margin: 10px auto;
  /*    position: absolute;*/
  /*    background-color: white;*/
  /*    overflow: auto;*/
}

.scroll-box-title {
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid black;
  /*    position: relative;*/
}

#input-structure-title {
  background-color: #E1455A;
}

#output-structure-title {
  background-color: #D8DD38;
}


/*set leaf node css*/

.node {
  display: block;
  top: auto;
  /*    margin-left: 0;*/
}

.leaf {
  width: 80%;
  /*    margin-left: 20px;*/
  border: 1px dotted red;
}


/*
.in-leaf.glyphicon:before {
    position: absolute;
    right: 0;
    top: 0;
}

.out-leaf.glyphicon {
    position: relative;
}
*/


/* file load options */

.load-file {
  text-align: left;
  display: none;
}

.file-drag {
  height: 75px;
  font-weight: bold;
  text-align: center;
  color: #555;
  border: 2px dashed #555;
  border-radius: 7px;
  cursor: default;
}

.file-drag-hover {
  height: 75px;
  color: #f00;
  border-color: #f00;
  border-style: solid;
  box-shadow: inset 0 3px 4px #888;
}

.file-content {
  padding: 10px;
  text-align: left;
}

JavaScript

$(document).ready(function(){
jsPlumb.setContainer($("body"));
jsPlumb.ready(function() {
  $(".scroll-box").draggable({
    drag: function() {
      jsPlumb.repaintEverything();
      //jsPlumb.repaint($(this)); 

    }
  });
  //            jsPlumb.draggable($(".scroll-box"));


  drawEndPoints("in-leaf", "Right");
  drawEndPoints("out-leaf", "Left");



});

function drawEndPoints(classname, endpointposition) {

  var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Dot", {
      radius: 10
    }],
    style: {
      fillStyle: 'blue'

    },
    maxConnections: -1,
    connector: "Straight",
    connectorStyle: {
      lineWidth: 2,
      strokeStyle: 'black'
    },
    scope: "blackline",
    dropOptions: {
      drop: function(e, ui) {
        alert('drop!');
      }
    }
  };

//console.log($("." + classname), classname, endpointposition, endpointOptions)
$("." + classname).each(function(k, v){
console.log("$(this)", this)
	  jsPlumb.addEndpoint(this, {
    anchor: endpointposition
  }, endpointOptions);
})

  jsPlumb.repaintEverything();
}



})