Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--
**
** Part of StackOverflow Answer 
**  http://stackoverflow.com/questions/536676/how-to-draw-a-line-between-draggable-and-droppable
**
** Created and Maintained by Bruno Alexandre (balexandre.com) 
**
** GIT REPO at https://github.com/balexandre/Draggable-Line-to-Droppable
**
** Last Edit: 19 February 2013
**
**
-->
<html>
<head>  
  <meta charset=utf-8 />
  <title>JS Bin</title>
  
  <!-- jQuery 1.10.2 -->
  <script src="http://cdn.jsdelivr.net/jquery/1.10.2/jquery-1.10.2.min.js"></script>
  
  <!-- JQuery UI 1.10.3 -->
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  
  <!-- Raphael 2.0.1 -->
  <script class="jsbin" src="http://cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js"></script>
​
  <!-- JsRender 1.0 pre 35 (optional) -->  
  <script src="http://cdn.jsdelivr.net/jsrender/1.0pre35/jsrender.min.js"></script>
  
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
​
<body id="body">
  
  <div id="svgbasics"></div>    
  
  <p>
    <strong>The objective is</strong> to MAP the persons from the left to the persons to the right.  Once the link is set, the same person canot have multiple sources or targets.  The target can only accept one person to be linked to.</p>
  
  <div id="pnlAllIn">
    <div id="leftPanel">
      
    </div>
    <div id="rightPanel">
      
    </div>
  </div>
  <div class="clearfix"></div>
      
  <script id="personTemplate" type="text/x-jsrender">
    <div class="person {{:cls}}">
      <input type="hidden" value="{{:id}}" />
      <ul class="buttons">
        <li><span class="ui-icon-arrow-4 ui-icon"></span></li>
        <li><span class="ui-icon-shuffle ui-icon"></span></li>
      </ul>
      <img alt="" src="" />
      <ul class="name">
        <li><h2>{{:id}}. {{:name}}</h2></li>
        <li>{{:position}}</li>
      </ul>
    </div>
  </script>
  
  <div id="dialog" title="Reset persons mapping?">
    <p>
      <span class="ui-icon ui-icon-alert"></span>Do you wish to delete all connection resetting the mapping to it's original positions?</p>
  </div>
  <div id="dialogMappingResult" title="Current Mapping">
    <p>
      Here is a list of the current mapping:</p>
    <ul>
      <li>No mapping was done yet</li></ul>
  </div>
  
  <a id="popButton" href="#">reset mapping</a> 
  <a id="getMappings" href="#">show mapping</a>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers