Arborecence xp drag-on-drop

Soyez le premier à donner votre avis sur cette source.

Vue 5 423 fois - Téléchargée 667 fois

Description

ce code développe un arborescence dans une frame c'est mieux pour quel soit utile ;)vous pouvez l'utilisé de la même manière que l'arborescence de votre système Windows oui un programme comme Windows le fait mais le code aussi :)

Source / Exemple :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
	<title>arborecence WINgood</title> 
	<script type="text/javascript" src="js/ajax.js"></script> 
	<script type="text/javascript" src="js/context-menu.js"></script><!-- IMPORTANT! INCLUDE THE context-menu.js FILE BEFORE drag-drop-folder-tree.js --> 
	<script type="text/javascript" src="js/drag-drop-folder-tree.js"> 
	
	/************************************************************************************************************
	(C) www.micking.1x.fr.com, Mai 2010
	
	Update log:
	
	
	.	
	
	 
	
	Thank you!

                                                                                                                                                                                                                        • /
</script> <link rel="stylesheet" href="css/drag-drop-folder-tree.css" type="text/css"></link> <link rel="stylesheet" href="css/context-menu.css" type="text/css"></link> <style type="text/css"> /* CSS for the demo */ img{ border:0px; } </style> <script type="text/javascript"> //-------------------------------- // Save functions //-------------------------------- var ajaxObjects = new Array(); // Use something like this if you want to save data by Ajax. 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); } // Call this function if you want to save it by a form. function saveMyTree_byForm() { document.myForm.elements['saveString'].value = treeObj.getNodeOrders(); document.myForm.submit(); } </script> </head> <body> <ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree"> <li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="#">Root node</a> <ul> <li id="node1"><a href="#">Europe</a> <ul> <li id="node2" noDelete="true"><a href="#">Norway</a> <ul> <li id="node3" noRename="true"><a href="#">Stavanger</a></li> <li id="node6"><a href="#">Bergen</a></li> <li id="node7"><a href="#">Oslo</a></li> </ul> </li> <li id="node8"><a href="#">United Kingdom</a> <ul> <li id="node9"><a href="#">London</a></li> <li id="node10"><a href="#">Manchester</a></li> </ul> </li> <li id="node12"><a href="#">Sweden</a></li> <li id="node13"><a href="#">Denmark</a></li> <li id="node14"><a href="#">Germany</a> <ul> <li id="node141"><a href="#">Berlin</a> <li id="node142"><a href="#">Munich</a> <li id="node143"><a href="#">Stuttgart</a> </ul> </li> </ul> </li> <li id="node15"><a href="#">Asia</a> <ul> <li id="node151"><a href="#">Japan</a> <li id="node152"><a href="#">China</a> <li id="node153"><a href="#">Indonesia</a> </ul> </li> <li id="node16"><a href="#">Africa</a> <ul> <li id="node17"><a href="#">Tanzania</a></li> <li id="node18"><a href="#">Kenya</a></li> </ul> </li> <li id="node19"><a href="#">America</a> <ul> <li id="node20"><a href="#">Canada</a></li> <li id="node21"><a href="#">United States</a></li> <li id="node22"><a href="#">Mexico</a></li> <li id="node23"><a href="#">Argentina</a></li> </ul> </li> <li id="node24" noChildren="true"><a href="#">Cannot have children</a></li> <li id="node25" noDrag="true"><a href="#">Cannot be dragged</a></li> </ul> </li> </ul> <form> <input type="button" onclick="saveMyTree()" value="Save"> </Form> <script type="text/javascript"> treeObj = new JSDragDropTree(); treeObj.setTreeId('dhtmlgoodies_tree2'); treeObj.setMaximumDepth(7); treeObj.setMessageMaximumDepthReached('Maximum depth reached'); // If you want to show a message when maximum depth is reached, i.e. on drop. treeObj.initTree(); treeObj.expandAll(); </script> <a href="#" onclick="treeObj.collapseAll()">Collapse all</a> | <a href="#" onclick="treeObj.expandAll()">Expand all</a> <p style="margin:10px">Good Test Friends</p> <!-- Form - if you want to save it by form submission and not Ajax --> <form name="myForm" method="post" action="saveNodes.php"> <input type="hidden" name="saveString"> </form> </body> </html>

Conclusion :


ce petit bout de code fonctionne superbement bien et développe une super arborescence

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.