Example: Drag and Drop

This example demonstrates how to enable the drag-and-drop feature to allow users to reorder the organization chart interactively.

Prerequisites: This feature requires the jQuery UI library.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>jOrgChart - Drag and Drop Example</title>
    <link rel="stylesheet" href="../css/jquery.jOrgChart.css"/>
    <style>
      /* Add some visual feedback for drag and drop states */
      .jOrgChart .node { border: 2px solid transparent; }
      .jOrgChart .drag-active { border: 2px dashed #000 !important; }
      .jOrgChart .drop-hover { border: 2px solid #E05E00 !important; }
    </style>
</head>
<body>

    <h1>My Reorganizable Team</h1>
    <p>Drag any team member and drop them onto another to change the structure.</p>

    <!-- Data source -->
    <ul id="org-data" style="display:none">
      <li>
        Project Lead
        <ul>
          <li>Developer 1</li>
          <li>Developer 2</li>
          <li>QA Engineer</li>
          <li>UX Designer</li>
        </ul>
      </li>
    </ul>

    <!-- Chart container -->
    <div id="chart-container"></div>

    <!-- JavaScript Libraries (jQuery, jQuery UI, and jOrgChart) -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../jquery.jOrgChart.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            $("#org-data").jOrgChart({
                chartElement : '#chart-container',
                dragAndDrop  : true // Enable the feature
            });
        });
    </script>

</body>
</html>

Explanation

  1. Include jQuery UI: We've added the jQuery UI library to the page, which is a mandatory dependency for drag-and-drop.
  2. Enable dragAndDrop: In the .jOrgChart() initialization call, we pass the option dragAndDrop: true. This is the key to activating the feature.
  3. Interaction: With this setup, you can now click and drag any node. As you hover over other nodes, they will be highlighted, indicating they are valid drop targets. When you release the mouse button, the dragged node will become a child of the target node.
  4. DOM Updates: When a node is moved, the plugin automatically restructures the original hidden <ul> list in the DOM to match the new hierarchy. This ensures the underlying data is always in sync with the visual representation.