From 5b6ae87f47b7a28c048a99097e2676563c52ce92 Mon Sep 17 00:00:00 2001
From: Wes <wwnolte@gmail.com>
Date: Fri, 18 Nov 2011 21:55:28 +0000
Subject: [PATCH] added drag-and-drop reordering of tree elements

---
 example/css/jquery.jOrgChart.css |  12 ++++
 example/example.html             |   7 +-
 example/jquery.jOrgChart.js      | 114 ++++++++++++++++++++++++++-----
 jquery.jOrgChart.js              | 114 ++++++++++++++++++++++++++-----
 readme.markdown                  |   6 +-
 5 files changed, 219 insertions(+), 34 deletions(-)

diff --git a/example/css/jquery.jOrgChart.css b/example/css/jquery.jOrgChart.css
index 4036a2c..f5c62ac 100644
--- a/example/css/jquery.jOrgChart.css
+++ b/example/css/jquery.jOrgChart.css
@@ -35,4 +35,16 @@
   display               : inline-block;
   width                 : 96px;
   height                : 60px;
+  z-index 				: 10;
+}
+
+/* jQuery drag 'n drop */
+
+.drag-active {
+  border-style			: dotted !important;
+}
+
+.drop-hover {
+  border-style			: solid !important;
+  border-color 			: #E05E00 !important;
 }
diff --git a/example/example.html b/example/example.html
index c6d51a7..b22dd7f 100644
--- a/example/example.html
+++ b/example/example.html
@@ -7,13 +7,18 @@
 	<link href="css/prettify.css" type="text/css" rel="stylesheet" />
 
 	<script type="text/javascript" src="prettify.js"></script>
+	
+	<!-- jQuery includes -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
+	
     <script src="jquery.jOrgChart.js"></script>
 
     <script>
     jQuery(document).ready(function() {
         $("#org").jOrgChart({
-			chartElement : '#chart'
+			chartElement : '#chart',
+			dragAndDrop  : true
 		});
 		
 		/* Extra Code */
diff --git a/example/jquery.jOrgChart.js b/example/jquery.jOrgChart.js
index 7301fa1..470d9aa 100644
--- a/example/jquery.jOrgChart.js
+++ b/example/jquery.jOrgChart.js
@@ -2,7 +2,7 @@
  * jQuery org-chart/tree plugin.
  *
  * Author: Wes Nolte
- * http://www.tquila.com
+ * http://twitter.com/wesnolte
  *
  * Based on the work of Mark Lee
  * http://www.capricasoftware.co.uk 
@@ -19,25 +19,96 @@
     var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
 	var $appendTo = $(opts.chartElement);
 
-    return this.each(function() {
-      $this = $(this);
-      var $container = $("<div class='" + opts.chartClass + "'/>");
-      if($this.is("ul")) {
-        buildNode($this.find("li:first"), $container, 0, opts);
-      }
-      else if($this.is("li")) {
-        buildNode($this, $container, 0, opts);
-      }
-      $appendTo.append($container);
-    });
+	// build the tree
+    $this = $(this);
+    var $container = $("<div class='" + opts.chartClass + "'/>");
+    if($this.is("ul")) {
+      buildNode($this.find("li:first"), $container, 0, opts);
+    }
+    else if($this.is("li")) {
+      buildNode($this, $container, 0, opts);
+    }
+    $appendTo.append($container);
+
+	// add drag and drop if enabled
+	if(opts.dragAndDrop){
+		$('.node').draggable({
+			cursor		: 'move',
+			distance	: 40,
+			helper 		: 'clone',
+			opacity		: 0.8,
+			revert 		: true,
+			revertDuration : 100,
+			snap		: 'div.node.expanded',
+			snapMode	: 'inner',
+			stack		: 'div.node',
+			start 		: handleDragStart,
+			stop		: handleDragStop
+		});
+		
+		$('.node').droppable({
+			accept 		: '.node',			
+			activeClass : 'drag-active',
+			drop		: handleDropEvent,
+			hoverClass	: 'drop-hover'
+		});
+		
+	  // Drag start event handler for nodes
+	  function handleDragStart( event, ui ){
+		
+		var sourceNode = $(this);
+		sourceNode.parentsUntil('.node-container')
+				   .find('*')
+				   .filter('.node')
+				   .droppable('disable');
+	  }
+
+	  // Drag stop event handler for nodes
+	  function handleDragStop( event, ui ){
+
+		/* reload the plugin */
+		$(opts.chartElement).children().remove();
+		$this.jOrgChart(opts);		
+	  }
+	
+	  // Drop event handler for nodes
+	  function handleDropEvent( event, ui ) {
+		console.log('handleDropEvent');		
+	    var sourceNode = ui.draggable;
+		var targetNode = $(this);
+		
+		var targetLi = $('li:contains("' + targetNode.html() +'")').last();
+		
+		var sourceliHtml = $('li:contains("' + sourceNode.html() +'")').last().clone();
+		var sourceLi = $('li:contains("' + sourceNode.html() +'")').last();
+		var sourceUl = sourceLi.parent('ul');
+		
+		if(sourceUl.children('li').size() > 1){
+			sourceLi.remove();			
+		}else{
+			sourceUl.remove();
+		}
+		
+		if(targetLi.children('ul').size() >0){
+			targetLi.children('ul').append('<li>'+sourceliHtml.html()+'</li>');		
+		}else{
+			targetLi.append('<ul><li>'+sourceliHtml.html()+'</li></ul>');					
+		}
+		
+	  } // handleDropEvent
+		
+	} // Drag and drop
   };
 
+  // Option defaults
   $.fn.jOrgChart.defaults = {
 	chartElement : 'body',
     depth      : -1,
-    chartClass : "jOrgChart"
+    chartClass : "jOrgChart",
+	dragAndDrop: false
   };
 
+  // Method that recursively builds the tree
   function buildNode($node, $appendTo, level, opts) {
 	
     var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
@@ -53,9 +124,16 @@
     }
 	// Draw the node
 	// Get the contents - any markup except li and ul allowed
-	var $nodeContent = $node.clone().children("ul,li").remove().end().html();
+	var $nodeContent = $node.clone()
+							.children("ul,li")
+							.remove()
+						.end()
+						.html();
+						
     //var $heading = $("<h2>").text(nodeContent);
     $nodeDiv = $("<div>").addClass("node").append($nodeContent);
+//	$nodeDiv.data('markup',$node.html());
+
 
 	// Expand and contract nodes
     $nodeDiv.click(function() {
@@ -100,8 +178,12 @@
         });
 
 		// horizontal line shouldn't extend beyond the first and last child branches
-        $linesRow.find("td:first").removeClass("top");
-        $linesRow.find("td:last").removeClass("top");
+        $linesRow.find("td:first")
+					.removeClass("top")
+				 .end()
+				 .find("td:last")
+					.removeClass("top");
+
         $tbody.append($linesRow);
         var $childNodesRow = $("<tr/>");
         $childNodes.each(function() {
diff --git a/jquery.jOrgChart.js b/jquery.jOrgChart.js
index 7301fa1..496227f 100644
--- a/jquery.jOrgChart.js
+++ b/jquery.jOrgChart.js
@@ -2,7 +2,7 @@
  * jQuery org-chart/tree plugin.
  *
  * Author: Wes Nolte
- * http://www.tquila.com
+ * http://twitter.com/wesnolte
  *
  * Based on the work of Mark Lee
  * http://www.capricasoftware.co.uk 
@@ -19,25 +19,96 @@
     var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
 	var $appendTo = $(opts.chartElement);
 
-    return this.each(function() {
-      $this = $(this);
-      var $container = $("<div class='" + opts.chartClass + "'/>");
-      if($this.is("ul")) {
-        buildNode($this.find("li:first"), $container, 0, opts);
-      }
-      else if($this.is("li")) {
-        buildNode($this, $container, 0, opts);
-      }
-      $appendTo.append($container);
-    });
+	// build the tree
+    $this = $(this);
+    var $container = $("<div class='" + opts.chartClass + "'/>");
+    if($this.is("ul")) {
+      buildNode($this.find("li:first"), $container, 0, opts);
+    }
+    else if($this.is("li")) {
+      buildNode($this, $container, 0, opts);
+    }
+    $appendTo.append($container);
+
+	// add drag and drop if enabled
+	if(opts.dragAndDrop){
+		$('.node').draggable({
+			cursor		: 'move',
+			distance	: 40,
+			helper 		: 'clone',
+			opacity		: 0.8,
+			revert 		: true,
+			revertDuration : 100,
+			snap		: 'div.node.expanded',
+			snapMode	: 'inner',
+			stack		: 'div.node',
+			start 		: handleDragStart,
+			stop		: handleDragStop
+		});
+		
+		$('.node').droppable({
+			accept 		: '.node',			
+			activeClass : 'drag-active',
+			drop		: handleDropEvent,
+			hoverClass	: 'drop-hover'
+		});
+		
+	  // Drag start event handler for nodes
+	  function handleDragStart( event, ui ){
+		
+		var sourceNode = $(this);
+		sourceNode.parentsUntil('.node-container')
+				   .find('*')
+				   .filter('.node')
+				   .droppable('disable');
+	  }
+
+	  // Drag stop event handler for nodes
+	  function handleDragStop( event, ui ){
+
+		/* reload the plugin */
+		$(opts.chartElement).children().remove();
+		$this.jOrgChart(opts);		
+	  }
+	
+	  // Drop event handler for nodes
+	  function handleDropEvent( event, ui ) {
+		console.log('handleDropEvent');		
+	    var sourceNode = ui.draggable;
+		var targetNode = $(this);
+		
+		var targetLi = $('li:contains("' + targetNode.html() +'")').last();
+		
+		var sourceliHtml = $('li:contains("' + sourceNode.html() +'")').last().clone();
+		var sourceLi = $('li:contains("' + sourceNode.html() +'")').last();
+		var sourceUl = sourceLi.parent('ul');
+		
+		if(sourceUl.children('li').size() > 1){
+			sourceLi.remove();			
+		}else{
+			sourceUl.remove();
+		}
+		
+		if(targetLi.children('ul').size() >0){
+			targetLi.children('ul').append('<li>'+sourceliHtml.html()+'</li>');		
+		}else{
+			targetLi.append('<ul><li>'+sourceliHtml.html()+'</li></ul>');					
+		}
+		
+	  }	
+		
+	}
   };
 
+  // Option defaults
   $.fn.jOrgChart.defaults = {
 	chartElement : 'body',
     depth      : -1,
-    chartClass : "jOrgChart"
+    chartClass : "jOrgChart",
+	dragAndDrop: false
   };
 
+  // Method that recursively builds the tree
   function buildNode($node, $appendTo, level, opts) {
 	
     var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
@@ -53,9 +124,16 @@
     }
 	// Draw the node
 	// Get the contents - any markup except li and ul allowed
-	var $nodeContent = $node.clone().children("ul,li").remove().end().html();
+	var $nodeContent = $node.clone()
+							.children("ul,li")
+							.remove()
+						.end()
+						.html();
+						
     //var $heading = $("<h2>").text(nodeContent);
     $nodeDiv = $("<div>").addClass("node").append($nodeContent);
+//	$nodeDiv.data('markup',$node.html());
+
 
 	// Expand and contract nodes
     $nodeDiv.click(function() {
@@ -100,8 +178,12 @@
         });
 
 		// horizontal line shouldn't extend beyond the first and last child branches
-        $linesRow.find("td:first").removeClass("top");
-        $linesRow.find("td:last").removeClass("top");
+        $linesRow.find("td:first")
+					.removeClass("top")
+				 .end()
+				 .find("td:last")
+					.removeClass("top");
+
         $tbody.append($linesRow);
         var $childNodesRow = $("<tr/>");
         $childNodes.each(function() {
diff --git a/readme.markdown b/readme.markdown
index 63ca75e..29e1d03 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -5,9 +5,12 @@
 
 Follow me [@wesnolte](http://twitter.com/wesnolte)
 
-jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you'd like to display. Features include:
+jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you'd like to display. If drag-and-drop is enabled you'll be able to reorder the tree which will also change the underlying list structure. 
+
+Features include:
 
 * Very easy to use given a nested unordered list element.
+* Drag-and-drop functionality allows reordering of the tree and underlying `ul`
 * Showing/hiding a particular branch of the tree by clicking on the respective node.
 * Nodes can contain any amount of HTML except `<li>` and `<ul>`.
 * Easy to style.
@@ -97,3 +100,4 @@ There are only 3 configuration options.
 1. **chartElement** - used to specify which HTML element you'd like to append the OrgChart markup to. *[default='body']*
 2. **depth** - tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999. *[default=-1]*
 3. **chartClass** - the name of the style class that is assigned to the generated markup. *[default='jOrgChart']*
+4. **dragAndDrop** - determines whether the drag-and-drop feature of tree node elements is enabled. *[default=false]*