<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://dl.dropboxusercontent.com/u/21436011/jquery.connect.js"></script> <style> body { height: 100%; 100%; } #container { 100%; height: 100%; position: relative; }
.draggable { /*padding:12px;*/ position: absolute; border: 1px solid #f5f5f5; }
.draggable .title { font-weight: bold; text-align: center; border-bottom: 1px solid #f5f5f5; }
.draggable .title:hover { cursor: move; } </style> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="container"> <div class="draggable" id="m1" style="top:500px;left480px;"> <div class="title"> Users </div> <ul class="fields"> <li>Field 1</li> <li>Field 2</li> <li>Field 3</li> </ul> </div> <div class="draggable" id="m2" style="top:200px;left:500px;"> <div class="title"> User Roles </div> <ul class="fields"> <li>Field 1</li> <li>Field 2</li> <li>Field 3</li> </ul> </div> <div class="draggable" id="m3" style="top:400px;left:700px;"> <div class="title"> Roles </div> <ul class="fields"> <li>Field 1</li> <li>Field 2</li> <li>Field 3</li> </ul> </div> </div> <script type="text/javascript"> var connections = []; $('.draggable').draggable({ drag : function() { var item = this; connections.forEach(function(connection){ if(connection.elem1[0] === item || connection.elem2[0] === item) { connection.calculate(); } }) } }); connections.push(new $.connect('#m1', '#m2', {leftLabel : 'One', rightLabel: 'Many'})); connections.push(new $.connect('#m1', '#m3')); </script> </body> </html>
from: