- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download arrange node script
Put this into your <HEAD> section
Put this into your <BODY> section
Download the arrow below by right clicking on it and select "Save target as". Put it into a sub folder called "images":
It's quite simple to configure this script. You create nodes by adding them as list items in the <UL id="arrangableNodes"> element. Example:
<li id="node1">Node no. 1</li>
<li id="node2">Node no. 2</li>
<li id="node3">Node no. 3</li>
<li id="node4">Node no. 4</li>
<li id="node5">Node no. 5</li>
<li id="node6">Node no. 6</li>
<li id="node7">Node no. 7</li>
<li id="node8">Node no. 8</li>
<li id="node9">Node no. 9</li>
<li id="node10">Node no. 10</li>
<li id="node11">Node no. 11</li>
<li id="node12">Node no. 12</li>
<li id="node13">Node no. 13</li>
<li id="node14">Node no. 14</li>
<li id="node15">Node no. 15</li>
These are the nodes used in the demo. It's important that each of your nodes have an ID if you want to be able to save them afterwards.
var offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
These two variables is used to position the little arrow. The first variable is for IE, the second one for Firefox. Play with these if the arrow doesn't position it self correctly which could happen if you for example doesn't use a strict doctype.
The saveArrangableNodes() function is used to save the changes from the arrange tool. What this function does is to create a commaseparated string of all the IDs. This string is inserted into the hidden form field "hiddenNodeIds".
What you have to do is to create a server side script which receives this commaseparated string, explodes it into an array of ids and then save the changes to the database/file system. When this is ready, remove the comment from the following line in the <HEAD> section:
This line submits the form.
Put the name of this server side file into the action attribute of the form:
<form method="post" action="????">
<input type="hidden" name="hiddenNodeIds">
A little tip at the end:
If you don't want the page to refresh when you click save, create a hidden iframe:
<iframe name="saveIframe" src="serversideFile.html" width="1" height="1" frameborder="no">
Then set target of your <FORM> to point to the name of the iframe:
<form method="post" action="serversideFile.html" target="saveIframe"
This will make the script submit the form "in the background".