Download arrange node script

Demo | Demo 2

Bookmark and Share


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


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>    

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

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


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.
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.
where is the download button?
wonder at 10:26AM, 2015/06/30.
<a href="">cheap cialis</a> <a href="">generic cialis</a> <a href="">loans for bad credit</a> <a href="">cialis generic</a> <a href="">buy cialis online</a>
Dubboopy at 11:43PM, 2019/08/26.
Viagra panama cialis generic <a href="">cheap cialis</a> buy cialis online pharmacy <a href="">buy cialis online cheap</a>
Geagree at 11:31PM, 2019/09/24.
Cialis mail order <a href="">cialis coupon</a> viagra us patent expiration <a href="">viagra online</a>
Gualisk at 02:56AM, 2019/09/25.
Best cialis pills <a href="">buy generic cialis online</a> buy tadalafil india tadacip <a href="">online cialis</a>
Gillromo at 02:56AM, 2019/09/25.

<a href="">sweatpants</a>
CharlesFinna at 10:27PM, 2020/09/27.

Medicines information. Short-Term Effects. <a href="">can i buy viagra without a prescription</a> Actual information about meds. Read here.
RobertAnIpt at 10:01AM, 2020/09/28.

Medication prescribing information. Drug Class. <a href="">cheap lisinopril</a> Actual what you want to know about medicines. Get information here.
RobertAnIpt at 03:13PM, 2020/09/28.

Medicament information leaflet. Long-Term Effects. <a href="">get generic zoloft pills</a> Actual information about pills. Read now.
Josephdet at 03:30PM, 2020/09/29.

Meds prescribing information. Generic Name. <a href="]how to buy accupril tablets</a> Actual what you want to know about drug. Read information now.
RobertAnIpt at 07:00PM, 2020/09/29.

Medication information sheet. Drug Class. <a href="]can you buy cheap accupril without insurance</a> Everything news about medicament. Read here.
RobertAnIpt at 07:58PM, 2020/09/29.

Medicines information leaflet. Generic Name. <a href="">cost of cheap doxycycline tablets</a> Some what you want to know about pills. Read information now.
Josephdet at 10:29PM, 2020/09/29.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021