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
#dhtmlgoodies_mainContainer blockquote{
margin-left:10px;
height:700px;
width:600px;
overflow:auto;
var boxSizeArray = [8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8];
01
02
...........etc. etc..(boxes 3 to 30)
31
Seems to work ok... scrolls up and down anyway. So now the big problem is that is wont drag and drop into the scrolled boxes. It'll drag and drop into boxes one to nine but not the rest. Is it possble to drag and drop into the scrolled boxes? Unfortunately the javascript code is way above my head. Ive looked at the code but I haven't been able to figure it out. Hope that you can spare the time to have a look as the code in its self is very useful.
When you move several students into the same box (4 or 5) and you want to remove the last one that was inserted the pointer to hand cursor doesn't change as it should sometimes. It either doesnt change or changes on the left side of the box, then sometimes it works ok?
Where do you copy the javescript code E from and where to paste so that MSIE8 will work?
Thanks.
div id="dhtmlgoodies_mainContainer"
-- ONE UL for each "room" --
blockquote id="boxes"
div
p 01 /p
ul id="box1" /ul
div
div
p 02 /p
ul id="box2" /ul
/div
....etc (boxes 3 to 30)
div
p 31 /p
ul id="box31"/ul
/div
/div
Regarding yesterdays comment
I just thought that I might add that the code will be used (if we can get it to work) to organise shifts for social workers and that there would be no commercial gain from its use.
Joe
Ive got the
div id="dhtmlgoodies_mainContainer"
-- ONE UL for each "room" --
exactly as you have it above and true you can drag and drop into any of the 31 boxes without any problem. But when I modify the id selector
dhtmlgoodies_mainContainer{ /* Right column DIV */
width:570px;
height:700px;
float:left;
overflow:scroll;
and include overflow:scroll; height: 700px; to create a scrollable column I cant drag and drop into boxes 10 to 31. The code seems to get lost.
thanks
I guess your busy, any chance you can look at the code to see if its possible to scroll the boxes,up and down, and drag and drop in each box? It would make this piece of code really useful.
many thanks
This is what I like you to to try:
1) At the top of the getTopPos function, change the first line to this:
var returnValue = inputObj.offsetTop - inputObj.parentNode.parentNode.scrollTop;
2) In the timerDrag function, add this line:
findPositions();
right below
if(dragTimer==10){
3) Add this new function
function findPositions(){
var ulArray = dragDropTopContainer.getElementsByTagName('UL');
for(var no=0;no<ulArray.length;no++){
ulPositionArray[no]['left'] = getLeftPos(ulArray[no]);
ulPositionArray[no]['top'] = getTopPos(ulArray[no]);
console.info(no + ':' + ulPositionArray[no]['top']);
}
}
Ive made the changes which you have recomended.
(In all cases script set to clone left hand column)
MSIE8 and Firefox:
Left had column does not clone once the box has been dragged to the right.
Will only drag to Boxes 1 to 6, will not drag to Boxes 7 to 31.
Opera, Chrome and Safari:
Left hand column clones ok once box has been dragged to the right.
Will drag to all boxes, 1 to 31.
Boxes 1 to 6, the order of the entries within these Boxes can be changed by dragging to the top or dragging to the bottom.
Boxes 7 to 31, unable to change the order of the entries within these Boxes.
As you can see the changes almost work perfectly in Opera Chrome and Safari while in MSIE8 and Firefox the changes appear to have no effect.
I will continue testing today,
Many thanks...
how can i do this:
"Student A" and "Student B" can be only move to "Team B", sorry for my bad english :P
Thanks
I'm asking if can still get support/advice on this script? I'm trying to use it on mobile devices (iPhone so far tried).
Is there a change of script that will allow this?
Also, I'm using it within a Joomla page & on laptops etc, the draggable block is not under the cursor. Any suggestions please?
Post your comment
Comment preview: