Merge pull request #17 from ja-jo/master

Improved handling of none ID lists. Element classes are copied across and element ids are stored against elements using the jQuery .data() method.
master
Wes 2012-05-07 05:00:30 -07:00
commit 6fddbda863
2 changed files with 58 additions and 138 deletions

View File

@ -35,7 +35,7 @@
distance : 40,
helper : 'clone',
opacity : 0.8,
revert : true,
revert : 'invalid',
revertDuration : 100,
snap : 'div.node.expanded',
snapMode : 'inner',
@ -68,68 +68,27 @@
// Drop event handler for nodes
$('div.node').bind("drop", function handleDropEvent( event, ui ) {
var sourceNode = ui.draggable;
var targetNode = $(this);
// finding nodes based on plaintext and html
// content is hard!
var targetLi = $('li').filter(function(){
var targetID = $(this).data("tree-node");
var targetLi = $this.find("li").filter(function() { return $(this).data("tree-node") === targetID; } );
var targetUl = targetLi.children('ul');
li = $(this).clone()
.children("ul,li")
.remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
return li.attr("id") == targetNode.attr("id");
}
else {
return li.html() == targetNode.html();
}
});
var sourceLi = $('li').filter(function(){
li = $(this).clone()
.children("ul,li")
.remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
return li.attr("id") == sourceNode.attr("id");
}
else {
return li.html() == sourceNode.html();
}
});
var sourceliClone = sourceLi.clone();
var sourceID = ui.draggable.data("tree-node");
var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } );
var sourceUl = sourceLi.parent('ul');
if(sourceUl.children('li').size() > 1){
sourceLi.remove();
}else{
if (targetUl.length > 0){
targetUl.append(sourceLi);
} else {
targetLi.append("<ul></ul>");
targetLi.children('ul').append(sourceLi);
}
//Removes any empty lists
if (sourceUl.children().length === 0){
sourceUl.remove();
}
var id = sourceLi.attr("id");
if(targetLi.children('ul').size() >0){
if (typeof id !== 'undefined' && id !== false) {
targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
}else{
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
}
}else{
if (typeof id !== 'undefined' && id !== false) {
targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
}else{
targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
}
}
}); // handleDropEvent
} // Drag and drop
@ -143,6 +102,7 @@
dragAndDrop: false
};
var nodeCount = 0;
// Method that recursively builds the tree
function buildNode($node, $appendTo, level, opts) {
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
@ -165,12 +125,12 @@
.end()
.html();
var new_node_id = $node.attr("id");
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
}else{
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
}
//Increaments the node count which is used to link the source list and the org chart
nodeCount++;
$node.data("tree-node", nodeCount);
$nodeDiv = $("<div>").addClass("node")
.data("tree-node", nodeCount)
.append($nodeContent);
// Expand and contract nodes
if ($childNodes.length > 0) {

View File

@ -35,7 +35,7 @@
distance : 40,
helper : 'clone',
opacity : 0.8,
revert : true,
revert : 'invalid',
revertDuration : 100,
snap : 'div.node.expanded',
snapMode : 'inner',
@ -68,68 +68,27 @@
// Drop event handler for nodes
$('div.node').bind("drop", function handleDropEvent( event, ui ) {
var sourceNode = ui.draggable;
var targetNode = $(this);
// finding nodes based on plaintext and html
// content is hard!
var targetLi = $('li').filter(function(){
var targetID = $(this).data("tree-node");
var targetLi = $this.find("li").filter(function() { return $(this).data("tree-node") === targetID; } );
var targetUl = targetLi.children('ul');
li = $(this).clone()
.children("ul,li")
.remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
return li.attr("id") == targetNode.attr("id");
}
else {
return li.html() == targetNode.html();
}
});
var sourceLi = $('li').filter(function(){
li = $(this).clone()
.children("ul,li")
.remove()
.end();
var attr = li.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
return li.attr("id") == sourceNode.attr("id");
}
else {
return li.html() == sourceNode.html();
}
});
var sourceliClone = sourceLi.clone();
var sourceID = ui.draggable.data("tree-node");
var sourceLi = $this.find("li").filter(function() { return $(this).data("tree-node") === sourceID; } );
var sourceUl = sourceLi.parent('ul');
if(sourceUl.children('li').size() > 1){
sourceLi.remove();
}else{
if (targetUl.length > 0){
targetUl.append(sourceLi);
} else {
targetLi.append("<ul></ul>");
targetLi.children('ul').append(sourceLi);
}
//Removes any empty lists
if (sourceUl.children().length === 0){
sourceUl.remove();
}
var id = sourceLi.attr("id");
if(targetLi.children('ul').size() >0){
if (typeof id !== 'undefined' && id !== false) {
targetLi.children('ul').append('<li id="'+id+'">'+sourceliClone.html()+'</li>');
}else{
targetLi.children('ul').append('<li>'+sourceliClone.html()+'</li>');
}
}else{
if (typeof id !== 'undefined' && id !== false) {
targetLi.append('<ul><li id="'+id+'">'+sourceliClone.html()+'</li></ul>');
}else{
targetLi.append('<ul><li>'+sourceliClone.html()+'</li></ul>');
}
}
}); // handleDropEvent
} // Drag and drop
@ -143,6 +102,7 @@
dragAndDrop: false
};
var nodeCount = 0;
// Method that recursively builds the tree
function buildNode($node, $appendTo, level, opts) {
var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
@ -165,12 +125,12 @@
.end()
.html();
var new_node_id = $node.attr("id");
if (typeof new_node_id !== 'undefined' && new_node_id !== false) {
$nodeDiv = $("<div>").addClass("node").attr("id", $node.attr("id")).append($nodeContent);
}else{
$nodeDiv = $("<div>").addClass("node").append($nodeContent);
}
//Increaments the node count which is used to link the source list and the org chart
nodeCount++;
$node.data("tree-node", nodeCount);
$nodeDiv = $("<div>").addClass("node")
.data("tree-node", nodeCount)
.append($nodeContent);
// Expand and contract nodes
if ($childNodes.length > 0) {