New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
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:
<script type="text/javascript">
treeObj = new JSDragDropTree();
treeObj.setTreeId('dhtmlgoodies_tree2');
treeObj.setMaximumDepth(5);
treeObj.setMessageMaximumDepthReached('Maximum depth reached');
treeObj.initTree();
</script>
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
I have one doubt.
when i try to get the node orders.
i get the id orders but the orders will have only numeric contents.
i trying to retrieve the data through asp.net
regards,
suraj
When i put the <ul> tree in a div of master.page the script have same problem
And how can I add new folder? :-)
Post your comment
Comment preview: