New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download arrange node script

Demo | Demo 2

Bookmark and Share

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.

Put this into your <HEAD> section

Put this into your <BODY> section

Download image

Download the arrow below by right clicking on it and select "Save target as". Put it into a sub folder called "images":

Configuration

It's quite simple to configure this script. You create nodes by adding them as list items in the <UL id="arrangableNodes"> element. Example:
<ul id="arrangableNodes">
    <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>    
</ul>

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.

You may also have to modify two javascript variables:
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.

Saving changes
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:
// document.forms[0].submit();
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">
</form>

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".

Comments

Anonymous
You guys should make this available to download if you want it to be called the download page....LOL
Anonymous at 06:55PM, 2011/08/13.
Richard
Hi,The script doesn't work in IE - can you suggest a fix for that? (If you try to drag it downward at first if freezes).BR/R
Richard at 08:25PM, 2013/03/11.
wonder
where is the download button?
wonder at 10:26AM, 2015/06/30.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com