jQuery Plugin For Draggable Related Model Boxes - HyperModel

HyperModel is a jQuery plugin for automatically generating animated lines between related model boxes just like the flow chart and mind map. The users are able to re-arrange the boxes and their properties via drag and drop.

How to use it:

1. Load the necessary jQuery, jQuery UI (For drag and drop) and Raphaël (For SVG based lines) libraries in the html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/raphael.min.js"></script>

2. Load the jQuery HyperModel plugin's files in the document.

<!-- Stylesheet -->
<link rel="stylesheet" href="jquery.hypermodel.css">
<!-- JavaScript -->
<script src="jquery.hypermodel.js"></script>

3. Create your own models & properties and specify the related model boxes using the data-target attributes as these:

<div class="hypermodel-container">
  <div class="hypermodel-area">
    <div class="hypermodel-column">
      <div class="hypermodel-grid">
        <div class="hypermodel-header">
          <h3>Model</h3>
        </div>
        <div class="hypermodel-body">
          <div id="model-n1000" class="hypermodel-item" data-target="1, 2, 3"> <span>Property</span> </div>
          <div id="model-n1001" class="hypermodel-item" data-target="1"> <span>Property</span> </div>
          <div id="model-n1002" class="hypermodel-item" data-target="3"> <span>Property</span> </div>
          <a href="#" class="hypermodel-item"> <span>Property</span> </a> </div>
      </div>
      <div class="hypermodel-grid">
        <div class="hypermodel-header">
          <h3>Model</h3>
        </div>
        <div class="hypermodel-body">
          <div id="model-n1007" class="hypermodel-item" data-target="1, 2, 3"> <span>Property</span> </div>
          <div id="model-n1008" class="hypermodel-item" data-target="1"> <span>Property</span> </div>
          <div id="model-n1009" class="hypermodel-item" data-target="3"> <span>Property</span> </div>
        </div>
      </div>
    </div>
    <div class="hypermodel-column">
      <div id="model-n1" class="hypermodel-grid" data-target="4, 5, 6">
        <div class="hypermodel-header">
          <h3>Related Model A</h3>
        </div>
        <div class="hypermodel-body">
          <div class="hypermodel-item"> <span>Property</span> </div>
        </div>
      </div>
      <div id="model-n2" class="hypermodel-grid" data-target="7, 8">
        <div class="hypermodel-header">
          <h3>Related Model B</h3>
        </div>
        <div class="hypermodel-body">
          <div class="hypermodel-item"> <span>Property</span> </div>
          <div class="hypermodel-item"> <span>Property</span> </div>
          <div class="hypermodel-item"> <span>Property</span> </div>
        </div>
      </div>
      <div id="model-n3" class="hypermodel-grid" data-target="9">
        <div class="hypermodel-header">
          <h3>Related Model C</h3>
        </div>
        <div class="hypermodel-body">
          <div class="hypermodel-item"> <span>Property</span> </div>
        </div>
      </div>
    </div>
    <div class="hypermodel-column">
      <div id="model-n4" class="hypermodel-grid" data-target="11, 13">
        <div class="hypermodel-header">
          <h3>Related Model A' 1</h3>
        </div>
        <div class="hypermodel-body">
          <div class="hypermodel-item"> <span>Property</span> </div>
        </div>
      </div>
      <div id="model-n5" class="hypermodel-grid" data-target="12">
        <div class="hypermodel-header">
          <h3>Related Model A' 2</h3>
        </div>
        <div class="hypermodel-body">
          <div class="hypermodel-item"> <span>Property</span> </div>>
        </div>
      </div>
    </div>
  </div>
</div>

4. Activate the plugin by calling the function on the top container.

$('.hypermodel-container').hypermodel({

  time: {

    // The line animation time when either window resize event be fired or user playing with drag&drop.
    animate: 300,    

    // The dash line's dash moving total seconds.
    frame: 3000      
  },

  // The gradient of line 0.1(curve), 10(straight).
  grad: 1,             

  // How many dash line moves one second.
  strokeSpeed: 500,    

  // Default line color (rgba, rgb, hash color).
  strokeColor: 'rgba(192, 192, 192, .5)',     

  // Dash line color (rgba, rgb, hash color).
  strokeDashColor: 'rgba(60, 180, 148, .65)', 

  // Default line thickness (px).
  strokeWidth: 1,      

  // Dash line thickness (px).
  strokeDashWidth: 1,  

  // Each of dash dottes's length (px).
  strokeDashWeight: 8, 

  // Gap about each of dash line's dottes (px).
  strokeDashMargin: 6  

});

5. All default configuration options.

$('.hypermodel-container').hypermodel({

  grad: 1.75,
  time: {
    animate: 300,
    frame: 3000,
    highlight: 3000
  },
  update: null,
  strokeSpeed: 500,
  strokeColor: 'rgba(192, 192, 192, .6)',
  strokeHighlightColor: 'rgba(200, 206, 255, .6)',
  strokeHighlightDashColor: 'rgba(178, 192, 255, 1)',
  strokeDashColor: 'rgba(192, 192, 192, .95)',
  strokeWidth: 1,
  strokeHighlightWidth: 1,
  strokeDashWidth: 1,
  strokeDashWeight: 8,
  strokeDashMargin: 6

});

---

This awesome jQuery plugin is developed by KennethanCeyer. For more Advanced Usages, please check the demo page or visit the official website.