guillaume
/
jOrgChart
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added drag-and-drop reordering of tree elements

master
Wes 2011-11-18 21:55:28 +00:00
parent b8e5f8a1f5
commit 5b6ae87f47
5 changed files with 219 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
example/css/jquery.jOrgChart.css
View File

@ -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;
}

7
example/example.html
View File

@ -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 */

114
example/jquery.jOrgChart.js
View File

@ -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() {

114
jquery.jOrgChart.js
View File

@ -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() {

6
readme.markdown
View File

@ -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]*