Download drag'n drop folder tree

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script from this Zip file.

Files included in the package:

drag-drop-folder-tree.html = Main html file
js/drag-drop-folder-tree.js = Main Javascript file
js/context-menu.js = JS code for the context menu
js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack). Used for the save method.
saveNodes.php = Saving nodes. You need to configure this file, i.e. database connection and query.
folderTree_updateItem.php = Rename or delete an item on the server. This file is called by ajax.
images/* = Images used by the script
css/drag-drop-folder-tree.css = CSS file used by the script
css/context-menu.css = CSS file used by the context-menu

Configuration

Define the tree

The tree is created by a standard <UL><LI> list as in drag-drop-foler-tree.html.

Notice that you have three attributes available which you could assign to your <LI> tags.

noDrag - If you set this to "true", it means that this list item won't be dragable.
noChildren - When this attribute is set to true, it won't be possible to move items to this node.
noSiblings = It is not possible to add items above or below this node, only children.(This is an attribute you typically use only on a root node).
noDelete = It is not possible to delete this node.
noRename = It is not possible to rename this node.

Creating tree object

Below the HTML of your tree, you create a tree object like this:

First, you create the tree object, then you define the id of your tree, i.e. the id of the top <UL>(example: <ul id="dhtmlgoodies_tree2"...).

The following methods until initTree() are optional. See description of available methods below.

Methods

the JSDragDropTree class has the following methods:

setMaximumDepth = Setting maximum depth of tree. Dropping of nodes would be cancelled automatically if the depth exceeds this number. Instead it would move the dragged nodes back to it's original location. Default value is 6.
setMessageMaximumDepthReached = Message to the user when he drop nodes and depth exceeds defined maximum depth.
setImageFolder = Specify path to images. Default is "images/".
setFolderImage = Specify name of folder image, example: "dhtmlgoodies_folder.gif"
setPlusImage = Specify name of small [+] image
setMinusImage = Specify name of small [-] image
setTreeId = Specify id of tree
expandAll = Expand all nodes - must be called after initTree()
collapseAll = Collapse all nodes - must be called after initTree()
getNodeOrders = Returns the order of the nodes in the tree in the format id-parentID,id-parentID,id-parentID
setFileNameRename = Specify name of file to call after a node has been renamed. Variables to this file will be "renameId" and "newName". Default file is "folderTree_updateItem.php"
setFileNameDelete = Specify name of file to call after a node has been deleted. Variables to this file will be "deleteIds" which is a commaseparated list of ids for the deleted nodes. Default file is "folderTree_updateItem.php"
setRenameAllowed = Enable or disable rename of nodes. This variable is default set to true. Set it to false if you don't want to allow any nodes to be renamed.
setDeleteAllowed = Specify if it's possible to delete nodes in the tree. This variable is default set to true. Set it to false if you don't want to allow any nodes to be deleted.
additionalRenameRequestParameters = Add parameters sent to the Ajax rename request. Argument to this methods should be an associative array. Example:
tree.setAdditionalRenameRequestParameters({
name: "treeAction",
command: "renameNode"
});
which will add the variables name and command to the request sent to the server when an item is being renamed.
setAdditionalDeleteRequestParameters = Add parameters sent to the Ajax delete request. Argument to this methods should be an associative array. Example:
tree.setAdditionalRenameRequestParameters({
name: "treeAction",
command: "deleteNode"
});
which will add the variables name and command to the request sent to the server when an item is being deleted.

Save a tree

When you want to save the changes you made, you need to create your own save function. Here's an example how it is done in the demo(drag-drop-folder-tree.html):

//--------------------------------
// Save functions
//--------------------------------
var ajaxObjects = new Array();

function saveMyTree()
{
    saveString = treeObj.getNodeOrders();
    var ajaxIndex = ajaxObjects.length;
    ajaxObjects[ajaxIndex] = new sack();
    var url = 'saveNodes.php?saveString=' + saveString;
    ajaxObjects[ajaxIndex].requestFile = url;  // Specifying which file to get
    ajaxObjects[ajaxIndex].onCompletion = function() { saveComplete(ajaxIndex); } ;  // Specify function that will be executed after file has been found
    ajaxObjects[ajaxIndex].runAJAX();    // Execute AJAX function

}
function saveComplete(index)
{
  alert(ajaxObjects[index].response);

}

This will send the nodes to the server by use of Ajax.

You may also use a plain form when you submit the data. Then the saveMyTree function could look something like this:

function saveMyTree_byForm()
{
document.myForm.elements['saveString'].value = treeObj.getNodeOrders();
document.myForm.submit();
}

Update log

Nov, 10th, 2006: Added delete and rename features

Comments

No one has commented this - be first!

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.