Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="https://raw.github.com/sporritt/jsPlumb/master/build/1.3.9/js/jquery.jsPlumb-1.3.9-all-min.js"></script>
 
</head>
<body>
  <div class="container">  
<div id="block-1" class="block"></div>
<div id="block-2" class="block"></div>
</div>
</body>
</html>
 
.container{
   background-color: red;
   width: 200px;
   margin: 0 auto;
}
.block {
    width: 100px;
    height: 100px;
    position: absolute;
    background: none repeat scroll 0 0 lightgray;
}
#block-1 {
    top:0px;
}
#block-2 {
    bottom:0px;
}
 
jsPlumb.bind("ready", function(connection, e) {
jsPlumb.connect({
   source: "block-1", 
   target: "block-2",
   connector: 'Straight',
   anchors: [
            [0.5, 0.5, 0, 1],
            [0.5, 0.5, 0, 0]
        ]
});
  $(window).resize(function(){
  jsPlumb.repaintEverything();
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers