New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download drag and drop to columns
Demo(With arrow) | Demo 2(With rectangle) | Demo 3(Cloning nodes)
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 arrow
To download the arrow used in this script, right click on it below.
Choose "Save target As" and put it in a sub folder called "images".
Configuration
Boxes in right side column
The boxes in the right side columns are created by use of plain HTML. Here's how it is done in this demo:
<div>
<p>Team a</p>
<ul id="box1">
<li id="node16">Student P</li>
</ul>
</div>
<div>
<p>Team B</p>
<ul id="box2"></ul>
</div>
<div>
<p>Team C</p>
<ul id="box3">
<li id="node17">Student Q</li>
<li id="node18">Student R</li>
</ul>
</div>
<div>
<p>Team D</p>
<ul id="box4"></ul>
</div>
<div>
<p>Team E</p>
<ul id="box5">
<li id="node19">Student S</li>
<li id="node20">Student T</li>
<li id="node21">Student U</li>
</ul>
</div>
As you can see, there is one <DIV> followed by a <UL> for each column box. You can prefill the <UL> with "students" if you like.
Javascript variables
You have some Javascript variables available which you could use to customize the script:
var boxSizeArray = [4,4,4,3,7]; // Array indicating how many items there is room for in the right column ULs
var arrow_offsetX = -5; // Offset X - position of small arrow
var arrow_offsetY = 0; // Offset Y - position of small arrow
var arrow_offsetX_firefox = -6; // Firefox - offset X small arrow
var arrow_offsetY_firefox = -13; // Firefox - offset Y small arrow
var indicateDestionationByUseOfArrow = true;
var var cloneAllowDuplicates = false;
var cloneSourceItems = false;
- boxSizeArray = An array indicating max number of items("students") in the small boxes on the right side.
- arrow_offsetX = Horizontal offset of small arrow - You may have to adjust this value to get the small arrow positioned correctly
- arrow_offsetY = Vertical offset of small arrow
- arrow_offsetX_firefox and arrow_offsetY_firefox = Same as above, but for Firefox.
- indicateDestionationByUseOfArrow = Indicate where objects will be dropped with an arrow. If you set this variable to false, it will use a rectangle instead.
- cloneSourceItems = This means that items will not be removed from the left box. This gives you the possibility of dragging items to more than one of the small boxes. Dragging from the small boxes works as before. Note! To remove items from the small boxes, just drag them to a blank area and release the mouse button.
- cloneAllowDuplicates = If cloneSourceItems is set to true, this variable determines whether you allow multiple instances of items inside a small box. Example: By dragging "Student 1" to "Team A" twice. Set this variable to true if you want to allow this, false otherwise.
Layout
The layout is controlled by use of CSS. Look at the comments there for help.
Save data
There is a function available for you which you can use to save data from the script. The name of the function is "saveDragDropNodes". This function
will create a string in the following format:
ID OF BOX|ID OF NODE;ID OF BOX|ID OF NODE;
- ID of box = The id of the parent <UL>, i.e. the box where the following node is located.
- |(pipe) = Used to separate id of box and id of node
- ID of node = Id of the dragged nodes.
- ;(semicolon) = Used to separate a node from the next one.
You can update the value of a hidden form field with this string and then submit the form. On the server, explode the submitted string(delimiter ; and |) and update your database.
Example on how to update the hidden form field:
1. Create a form with a hidden form field: example:
<form name="myForm" method="post" action="save.html" onsubmit="saveDragDropNodes()">
<input type="hidden" name="listOfItems" value="">
<input type="submit" value="Save" name="saveButton">
</form>
2. Update the hidden form field with this line at the bottom of the saveDragDropNodes function:
document.forms['myForm'].listOfItems.value = saveString;
With a form like this, the saveDragDropNodes will be executed when someone clicks on the "Save" button. The function will then update the hidden form field "listOfItems" and send it to the server.
Use a strict or loose doctype
For best results, use a valid doctype. You can either choose the strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or a loose doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The doctype tag should be placed on the first line of your HTML file.
Rate this script at Hotscripts.com
No one has commented this - be first!
Post your comment
Comment preview: