Download drag and drop to columns

Demo(With arrow) | Demo 2(With rectangle) | Demo 3(Cloning nodes)

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

If you like my script, please rate it at HotScripts.com

Comments

king fisher
1) Is there a patch to make this work in IE 8?2) Can the list on the right side stay on their position and not move up when an item is dragged to the left column?Thanks.
king fisher at 11:59PM, 2011/03/14.
Admin comment
DHTMLGoodies
The IE8 problem should have been resolved now. Just copy and past the javascript code.E
DHTMLGoodies at 11:45AM, 2011/03/15.
Joe
Hi, I've created a scrolling column where the boxes are located to represent 31 days (one month). I modified the html part of the code as follows.

#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.
Joe at 02:23PM, 2011/04/04.
Joe
This bit didnt get sent hope that this makes it a bit clearer.

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
Joe at 02:34PM, 2011/04/04.
Joe
Hi,

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
Joe at 07:55AM, 2011/04/05.
Admin comment
DHTMLGoodies
Joe,I cannot find any problems with the code.After specifying the boxSizeArray as you have done correctlyvar 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];it should work with html code like this: <div id="dhtmlgoodies_mainContainer"> <!-- ONE <UL> for each "room" --> <div> <p>1</p> <ul id="box1"> </ul> </div> <div> <p>2</p> <ul id="box2"></ul> </div> <div> <p>3</p> <ul id="box3"> </ul> </div> <div> <p>4</p> <ul id="box4"></ul> </div> <div> <p>5</p> <ul id="box5"> </ul> </div> <div> <p>6</p> <ul id="box6"> </ul> </div> <div> <p>7</p> <ul id="box7"> </ul> </div> <div> <p>8</p> <ul id="box8"> </ul> </div> <div> <p>9</p> <ul id="box9"> </ul> </div> <div> <p>10</p> <ul id="box10"> </ul> </div> <div> <p>11</p> <ul id="box11"> </ul> </div> <div> <p>12</p> <ul id="box12"> </ul> </div> <div> <p>15</p> <ul id="box15"> </ul> </div> <div> <p>31</p> <ul id="box31"> </ul> </div> </div>
DHTMLGoodies at 11:18AM, 2011/04/05.
Joe
Hi, thanks for your reply

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
Joe at 03:42PM, 2011/04/05.
Joe
Hi Alf,
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
Joe at 03:25PM, 2011/04/11.
Admin comment
DHTMLGoodies
Joe,

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']);
}
}
DHTMLGoodies at 10:43AM, 2011/04/13.
Joe
Good morning Alf,

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...
Joe at 08:38AM, 2011/04/15.
Peter
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
Peter at 03:42PM, 2011/05/22.
shyamyumnam
I want an anchor in the "li""
  • google
  • "I want the drag workable and also the link.How can I do that please help.
    shyamyumnam at 12:34PM, 2011/07/05.
    shyamyumnam
  • go to google
  • The content is drag-gable but the link doesn't work. Please help so that I can do both.
    shyamyumnam at 12:37PM, 2011/07/05.
    kimbok
    goods
    kimbok at 01:52AM, 2011/07/11.
    Thomas
    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?
    Thomas at 12:22PM, 2011/07/22.
    Andre
    How i can creat 2 or more coluns in left side ????
    Andre at 11:24AM, 2011/08/17.
    Philippe
    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
    Philippe at 02:46PM, 2011/09/09.
    cali
    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
    cali at 11:19AM, 2011/09/22.
    Fred B
    This is really cool, but it doesn't work in IE8 - which (unfortunately) is the main browser we use. Any help is appreciated.
    Fred B at 05:47PM, 2011/09/26.
    Fred B
    Poops, my bad! It IS working in IE8
    Fred B at 05:55PM, 2011/09/26.
    Moses A.
    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.
    harish
    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.
    harish at 11:31AM, 2011/11/11.
    Don Carmon
    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?
    Don Carmon at 11:17PM, 2011/11/26.
    phpdevelopper
    hi,

    The code is working correctly...
    But I would make the <ul></ul> dynamic
    so I added
    <div id="dhtmlgoodies_mainContainer">
    <!-- ONE <UL> for each "room" -->
    <?php $j=1; ?>
    <div>
    <table>
    <tr id="champs<?php echo $j;?>">
    <td>Date <input class="Bouton" name="date<?php echo $j; ?>" type="text" id="date<?php echo $j; ?>" value="<?php echo date('d/m/Y');?>" size="12" maxlength="12">
    <ul id="box<?php echo $j; ?>"></ul>
    </td></tr></table></div>
    <input type="hidden" value="<?php echo $j;?>" id="max" name="max">
    <?php $c = $j+1;?>
    <span id="leschamps_<?php echo $c;?>"><a href="javascript:create_champ(<?php echo $c;?>)" > add new date </a></span>
    </div>

    and for the js function :

    function create_champ(i)
    {
    document.getElementById("max").value= i;
    var i2 = i + 1;
    document.getElementById('leschamps_'+i).innerHTML='<div ><table id="champs'+i+'" border="0"><tr><td>Date  <input class="Bouton" name="date'+i+'" type="text" id="date'+i+'" value="<?php echo date('d/m/Y');?>" size="12" maxlength="12"> <input type="image" src="images/ew_calendar.gif" alt="Date" onClick="popUpCalendar(this, document.getElementById(\'date'+i+'\'),\'dd/mm/yyyy\');return false;"></p><ul id="box'+i+'"></ul></td></tr></table></div>';
    document.getElementById('leschamps_'+i).innerHTML += (i <= 20) ? '<span id="leschamps_'+i2+'"><a href="javascript:create_champ('+i2+')" onclick="this.style.display=\'none\'"> Ajouter une date de livraison finale </a></span>' : '';

    }

    so in the first <ul></ul> I can drog and drop
    but in the new <ul></ul> I could not
    phpdevelopper at 10:11AM, 2011/12/05.
    chintan
    <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.....
    chintan at 05:44AM, 2012/03/01.
    ofir
    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
    ofir at 09:16PM, 2012/04/16.
    harish
    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..?
    harish at 04:16AM, 2012/06/26.
    John
    What's the code and form set-up to save this to SQL database with php or Ajax? Thanks for the pointers!
    John at 02:18PM, 2012/09/01.
    helge
    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?
    helge at 05:09AM, 2012/09/02.
    Sam
    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.
    Sam at 09:21PM, 2012/11/14.
    John Funds
    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 Funds at 12:36PM, 2012/11/23.
    Vishnu Saini
    Hi,Is this concept work on iPad and iPhone.Thanks.
    Vishnu Saini at 01:50PM, 2013/01/28.
    Vishnu Saini
    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 Saini at 01:52PM, 2013/01/28.
    tintin
    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
    tintin at 03:45PM, 2013/02/07.
    tintin
    Thats' Ok in fact. I simply didn't understand but it works.My job will be now to separate the boxes with the nodes.
    tintin at 07:48PM, 2013/02/07.
    Guenneguez
    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
    Guenneguez at 10:35AM, 2013/03/18.
    Marc
    Great script! Do you have an example of how to submit the results to a perl script? Thx in advance.
    Marc at 03:11AM, 2013/04/25.
    Jens
    <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.
    Jens at 01:01PM, 2013/07/03.
    naveen
    How to get the id of droppable element.
    naveen at 07:53AM, 2013/09/27.
    Chad
    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.
    Chad at 08:44PM, 2013/12/12.
    Ajay
    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.
    Ajay at 08:59AM, 2014/01/14.
    Keshav
    <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
    Keshav at 09:10AM, 2014/01/14.
    Russ
    <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
    Russ at 05:30PM, 2014/03/28.
    asassas
    <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
    asassas at 09:52AM, 2014/06/19.
    Silvan Vella
    It is not working on Ipad. What can I do please?
    Silvan Vella at 12:41PM, 2014/07/02.
    Cj
    How do you load in an saved content?
    Cj at 10:37AM, 2015/01/23.
    iheb
    how to save data in bd mysql.
    iheb at 03:18PM, 2015/02/23.
    iheb
    how to save data in bd mysql ? Urgenttttttttttttttt
    iheb at 03:19PM, 2015/02/23.
    renifal
    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--
    renifal at 04:42AM, 2015/02/27.
    Aggie
    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?
    Aggie at 08:32PM, 2015/04/13.
    Nikhil
    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>
    Nikhil at 12:56PM, 2015/05/04.
    iheb
    this script not worked in smartphone,how i can modifiy it to be worked.please help me.
    iheb at 10:50AM, 2015/09/28.
    Isabel
    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.
    Isabel at 04:46PM, 2016/01/08.
    Mary
    I'm having some issues too.
    Mary at 07:13AM, 2016/10/07.

    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