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.

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.

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?

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

Joeat 08:38AM, 2011/04/15.

Hi,
how can i do this:
"Student A" and "Student B" can be only move to "Team B", sorry for my bad english :P
Thanks

Peterat 03:42PM, 2011/05/22.

I want an anchor in the "li""

google

"I want the drag workable and also the link.How can I do that please help.

The content is drag-gable but the link doesn't work. Please help so that I can do both.

shyamyumnamat 12:37PM, 2011/07/05.

goods

kimbokat 01:52AM, 2011/07/11.

Hi, I saw a very nice script: Quiz script - Drag and drop to columns But i have one more special requirement: How is it possible to ask for a Text which is entered into the list too. Example: I move a student into a list and would now be asked for a text (e-mail address or phone), which is entered into the list too. Is something possible?

Thomasat 12:22PM, 2011/07/22.

How i can creat 2 or more coluns in left side ????

Andreat 11:24AM, 2011/08/17.

Hi,Really interesting goodies.Q?: is it possible to dynamically update boxSizeArray in order to be able to add element(s) that are over the initial value.The aim is to increase the team member to more than the initially fixed size.I've tried by restarting the initDragDropScript after setting boxSizeArray generated and returned by a XMLhttp request, but always keep the 'former' values.many thanks,Phil

Philippeat 02:46PM, 2011/09/09.

hi and thanks for sharing this script :)i have a question is it possible to have a decount of available space free.Then i would start the count from the "boxSizeArray" var to zero dinamicly when the user is putting items in the box.i suppose i doable because the script is counting somewhere the max items per box. but i do not know how, if someone could help me it would be very nice :)cheers

caliat 11:19AM, 2011/09/22.

This is really cool, but it doesn't work in IE8 - which (unfortunately) is the main browser we use. Any help is appreciated.

Fred Bat 05:47PM, 2011/09/26.

Poops, my bad! It IS working in IE8

Fred Bat 05:55PM, 2011/09/26.

I'm wondering.. yes this script can save the form values but when I refresh the page would it retrieve the last saved values on page load?

Moses A.at 05:25PM, 2011/10/28.

I tried demo3(cloning).LI are cloned properly..good!But,on clicking them...they are disapperaing...however dragging is fine....deletion is only happening with clicking on the cloned LI placed TEAMs.I checked the source code....that shouldn't be happening....can you please look into this and notify me if i am missing anything.

harishat 11:31AM, 2011/11/11.

This script is very close to what I need. I'd like to hire the author or a javascript/CSS expert to modify this script to get it where I need it. How do I buy custom work for this script after I purchase the professional license?

so in the first <ul></ul> I can drog and drop
but in the new <ul></ul> I could not

phpdevelopperat 10:11AM, 2011/12/05.

<a href="#comment137">DHTMLGoodies wrote:</a>The IE8 problem should have been resolved now. Just copy and past the javascript code.E

plzzzz give me a demo of thisand also suggesion for how update ?if posible demo with drag and drop + updatethen send me that mail advancced i say a big thanks.....

chintanat 05:44AM, 2012/03/01.

how i can to drag pic and text together and drop only pic in some of <ul id="box"> , and when the pic go back the text will be back to

ofirat 09:16PM, 2012/04/16.

Hi,Iam getting this error.You can put these values into a hidden form fields, post it to the server and explode the submitted value thereHOw can i send these values into the server..?

harishat 04:16AM, 2012/06/26.

What's the code and form set-up to save this to SQL database with php or Ajax? Thanks for the pointers!

Johnat 02:18PM, 2012/09/01.

Nice bit of code.Have tried to make it interchangable - ie. when you drop a student on another student they change places.Cant get it to work though - any ideas?

helgeat 05:09AM, 2012/09/02.

How would you modify the JS to allow this to work inside a div. Right now, in a popup DIV, the coordinates are off by the offset/positioning of the DIV that this widget is placed in.

Samat 09:21PM, 2012/11/14.

Can you please help me learn how to save it to where I can click save then view my updates? Thank you very much

John Fundsat 12:36PM, 2012/11/23.

Hi,Is this concept work on iPad and iPhone.Thanks.

Vishnu Sainiat 01:50PM, 2013/01/28.

Hi,I want to try this "Drag and drop to columns >> Demo 3". But this is not working on iPad.Is any solution to work with same functionality on iPad.Thanks.

Vishnu Sainiat 01:52PM, 2013/01/28.

Hi,Very nice script indeed.I'd like to create a form in order to pass on the values to another page. I know how to create a form but my problem is that I don't understand how these values are made.Is it from the following code ? saveString.replace(/;/g,';<br>')If yes, how can I pass them in a form?I hope you can understand my English.Thank's a lot

tintinat 03:45PM, 2013/02/07.

Thats' Ok in fact. I simply didn't understand but it works.My job will be now to separate the boxes with the nodes.

tintinat 07:48PM, 2013/02/07.

He, Sorry for my english but I am frenchThis sample doesn't work fine with horizontal list. You must put exactly the item between 2 elements. And if you hide some of them nothink works.You can't have multiple sources list it doesn't work.I have a new version with correction. How can I update this post ?ThanksThomas

Guenneguezat 10:35AM, 2013/03/18.

Great script! Do you have an example of how to submit the results to a perl script? Thx in advance.

Marcat 03:11AM, 2013/04/25.

<a href="#comment2223">John wrote:</a>What's the code and form set-up to save this to SQL database with php or Ajax? Thanks for the pointers!

How is the Answer? Please let me know this to.

Jensat 01:01PM, 2013/07/03.

How to get the id of droppable element.

naveenat 07:53AM, 2013/09/27.

Love the script. One thing I need to figure out is how to move the last dragged item back to original column. So, I need to create an "undo" function after the drop has been completed. Anybody that can offer up some code samples..I would greatly appreciate it.

Chadat 08:44PM, 2013/12/12.

Hi,I am using http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.htmldemo script and working well.But I am getting one problem. Some time when I click on left box item (multiple time or single time) then clicked item disappear automatically.I want, left box item should not be changed or remove automatically.My JS is not too good but I have tried to get it done but couldn't do this.Please help me.Thanks in advance.

Ajayat 08:59AM, 2014/01/14.

<a href="#comment4632">Ajay wrote:</a>Hi,I am using http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.htmldemo script and working well.But I am getting one problem. Some time when I click on left box item (multiple time or single time) then clicked item disappear automatically.I want, left box item should not be changed or remove automatically.My JS is not too good but I have tried to get it done but couldn't do this.Please help me.Thanks in advance.

The same problem I have seen with live script..look at and please fix if you can..http://www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.html

Keshavat 09:10AM, 2014/01/14.

<a href="#comment4091">Vishnu Saini wrote:</a>Hi,I want to try this "Drag and drop to columns >> Demo 3". But this is not working on iPad.Is any solution to work with same functionality on iPad.Thanks.

I was wondering the same thing. I'm going to look at some touch scripts to integrate, but curious if there is already functionality for this on touch devices.Well done script.R

Russat 05:30PM, 2014/03/28.

<a href="#comment296">Joe wrote:</a>Hi,Regarding yesterdays commentI 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

<a href="#comment4691">Russ wrote:</a>

<a href="#comment4091">Vishnu Saini wrote:</a>Hi,I want to try this "Drag and drop to columns >> Demo 3". But this is not working on iPad.Is any solution to work with same functionality on iPad.Thanks.

I was wondering the same thing. I'm going to look at some touch scripts to integrate, but curious if there is already functionality for this on touch devices.Well done script.R

asassasat 09:52AM, 2014/06/19.

It is not working on Ipad. What can I do please?

Silvan Vellaat 12:41PM, 2014/07/02.

How do you load in an saved content?

Cjat 10:37AM, 2015/01/23.

how to save data in bd mysql.

ihebat 03:18PM, 2015/02/23.

how to save data in bd mysql ? Urgenttttttttttttttt

ihebat 03:19PM, 2015/02/23.

hellow sir, i think it's kind of nice code for drag and drop menu. now i want to ask you this:in the left box, i have so many values, and some of them placed out of the box, so, how should i do for this? i want to make a scroll function, but how to configure?--big thanks--

renifalat 04:42AM, 2015/02/27.

Hi is there a way to append/wrap items around the drop before cloning on drop inserting. For e.g. wrap with DIV or LI tags?

Aggieat 08:32PM, 2015/04/13.

Hello,It's a nice code for drag and drop contents, but when I'm trying to append some anchor tag on li and make drag-gable to that li, then onclick function is not working properly.Please help me. below is the code:<li id="4"> Item4 <a href="#" onclick="ShowDialog(4);"> Show </a> </li>

Nikhilat 12:56PM, 2015/05/04.

this script not worked in smartphone,how i can modifiy it to be worked.please help me.

ihebat 10:50AM, 2015/09/28.

Hi, i'm trying to do this, but i'm having some issues. I want the list to be dynamic, do you have any suggestions to do this? I did the "studants avaliable" dynamic, but the "Team" list I just can't find a way to do it. If you can help me I would be really greatful.

Isabelat 04:46PM, 2016/01/08.

I'm having some issues too.

Maryat 07:13AM, 2016/10/07.

hi,
please how to customize this code for the mobile since the scroll bar event has precedence on the drag event so could you please send a code integrating jquery touch or whatever to adapt the code for mobile deployment using cordova?