What a Drop
I spent some time recently investigating drag and drop with JavaScript. First I found a script for making anything drag-able, which is called DOM-Drag. Then, putting that to work with modifying the sibling nodes of an ordered list is Simon Cozens. Following on his success is Tim Taylor with several examples.
My own adaptation of that is to allow you to move items from one list to another. This could also be expanded from lists to just about any container. The lists are nice because you get good snap-to positioning when you drop your drag, but this combined with those fake floating windows and you could make a File Explorer or Finder simulation and be pretty happy. I haven’t done that yet, but the simple version is over here.
You can leave a response, or trackback from your own site.
The example you’ve written is very close to what I’m looking to do in a web app of my own.
*But* I’d like to have horizontal columns instead of vertical ones.
I’m not too much of a css or dhtml expert, but when I tried:
added ‘display: table’ to the ‘ul’ element and ‘display: table-cell’ to the ‘li’ element, I didn’t get the desired results (moving elements didn’t work correctly)
Can you give me some pointers?
Just when I was about to abandon javascript for Flash to do a file manager in my CMS, here comes sortable, draggable lists. This is great work all you guys are doing.
To the point though. When an element is dragged from one list and the mouse is released before you get to the other list, the element disappears.
dvf1976 - check out the examples by Tom Taylor if you haven’t already. It would take some combination of his updated scripts and what I did if you want to drag between lists. If you just want to drag around within a table-like list, I think his new script has exactly what you need.
The items being deleted when dropped out of any list is a leftover of the original drag script. It was set to use that as a way to delete items from the list and I left it in. I think it would be easy to adapt things to either bounce back to the last list it was in or maybe have that a configurable thing.
Cool,
plus a feature you guys might come up with too - dragging a copy/clone of the item of into the other list. Walter Zorn’s drag lib can do this, but only for images, not for layers.
I had asked Tim for exactly that… dragging between lists
hello,
is it possible to save the position of the object you are dragging in a database so that when one person changes it. it will change by everyone
thanks a lot
Hi, is there a way to return the list to its original behavior, static text non dragable? I’m trying to implement a function like “lock for changes”
For saving the positions, see Tim Taylor’s post about it. He also added an update that his examples now remember their order. You would have to implement something on the server side of things to store and retrieve the order from a database, though.
To make a list no longer dragable, you would need to get the list and then for each of the elements inside it set the onmousedown property to a function that does nothing.
I think this is wonderful work. I need to make it work for 6 lists on a page. Is it possible to use your code? and where can I download the source?
You should be able to make as many lists as you want work. If you use my code you would just have to do DragDrop.makeListContainer( list ) on each one. To duplicate my sample you need three JavaScript files: coordinates.js, drag.js, and dragdrop.js.
I agree - great work. I have a table of elements (5 columns per row) that I would like to drag into 1 of 6 other tables. Upon completion, I need to submit the results back to the server to record how these items were split between the 6 targets.
Can you give me some pointers on how I would use your js to accomplish this?
Unfortunately, the samples from myself and others aren’t quite that advanced, yet. If you haven’t yet, check out this post from Tim Taylor which talks about getting the order back out of all this. His library now has a built in way to serialize the order of a list. That would then have to be recombined with what I did for draging between lists, which is where the available examples don’t do quite what you want.
Man, this is soooo close to what I need. I need process flow/routing functionality in one of my web apps and this type of script would allow someone to visually create a sorted routing list. I need to select names from one list (pulled from a database), drag the names I want to include in the routing process from that list into a second list, and then sort the names in the order I want the document to be routed to. Then once the order is established, be able to submit the listing to a database table.
I need to create a “list” of divs, but I need those divs to be moved by dragging a handle, the rest of the div must be selectable. Is it possible with your code to define a handle?
If you look in the drag.js source, there is a function associated with each list item called setDragHandle. That should do what you want.
Hello -
I am working on a project for a client that involves a Web-face and I had begun using laszlo for the user experience. Well, after some not too small effort on my behalf, the client decided they didn’t want to use laszlo because it couldn’t be tested with an automated QA tool. Anyway - I need to map source fields to dest fields and want to have drag & drop functionality. I also need to populate the lists from a database and wanted to do as much client-sided work as possible for speed. Check out the URL to my laszlo demo test (http://laszlo.cmc-opg.com) to get a feeling of what I HAD in mind. Any thoughts would be greatly appreciated - John
Oops - sorry - the URL I gave didn’t work (I had tried to give the test site a more meaningful name the lazy way) anyway - to check out the laszlo based functionality - check out http://survey.cmc-opg.com/ (and no - it’s NOT a survey - just a DNS entry point I had available) Anyway - another issue is to each drag and drop list in a scrollable window… possible with what you’ve been working on?
TIA - John
The drag drop feature implemented by you was remarkable. Is it possible to have a grid in place of just vertical grid. Can you please suggest me how to replace the lists into grids on both the sides …
Neeraj Singhal
I made a three column version. A wide column may not drag to a narrow one. A draggable item with only links and images as links never shows the drag-cursor.
http://www.realsimplecms.com/temp/index.html
Anyone interested in working on a drag and drop editor for the realSimpleCMS?
Thanks
Damn nice script Ben. It’s currently solving a problem I’ve been having for ever with a site I’m doing. Although, try as I might, I can’t get the elements to bounce back to their last container when dragged into no-where. Ideally they’d jump back to their original list when dragged to no-where. Any ideas? Truthfully, this javascript is over my head but I’ll keep hacking on it. I’ll re-post here if I figure it out.
I made a version that saves the the items from vanishing by adding them to a “trash” list, it also saves the structure via php / mysql so its persistent.
Check it out here http://www.cyberdummy.co.uk/2005/07/13/multi-list-drag-and-drop/
Is it possible to make a 1-way drag and drop.
ListA could be dropped into ListB, but ListB could not drop into ListA?
Is it also possible to have a set number of objects in ListB? If a user drags from ListA into ListB, it will overwrite the object in ListB that it drops over?
This great until the list in the first column fills up the screen and you lose sight of the column you want to drag to (the second column). At that point, you can grab an element and have the browser window scoll up to drop it into the second column. You have to keep sliding it up the sort order of the first column until you can see the second column and then drop it in. In essence, if your first column is long, somwhow it needs to be scrollable. I’ve tried different approaches (scrollable table, iFrame, etc.), but nothing has worked. Any suggestions?
Sorry, I meant to say… “At that point, you CAN’T grab an element and have the browser window scoll up to drop it into the second column.”
Your May 16th response to my query helped a lot. I was able to create 6 lists. I have run into another issue. The lists can be too long. Is there a way to make a scrollable container to use with drag and drop? Is there some solution to this problem.
Has anyone tried to get this drag & drop between lists to work with the new version of Tool-man. I see that the Tool-man library has been re-written and this drag & drop doesn’t work with the new library.
Thanks
Guys I got the following things working,
- Move from A to B, but not from B to A.
- Allow sorting only in B, but not A
- When you move the item out of A, it copies does not remove
- You can make a grid of n number of rows and columns 2*2 10*10 anything,
- Using the new tool-man implementation, I was able to get the scrolling working, but using the one what ben did, I’m not able to get the scrolling working??
Can any one help me on that? I’ll host my code on the website soon..
Is it possible to get a demo or code for the scrolling? I am trying to create a few scrollable lists and then drag beween the lists. Each would be a scrollable list.
What website is tht.
Very nice! This rocks!
One thing I was wondering - is it possible to do this with tables (instead of lists)? In other words, dragging something from one table to another. Or, even just dragging something _within_ a table?
The reason I ask this is that I’m trying to get together some javascript code to do crosstabs (just as in say, OO.org or Excel). This would allow you to drag a column across to the rows area (and vice-versa). When th e column was “dropped”, the numbers would then re-calculate.
So - this drag-and-drop code is a very nice start, anyway. ( I should add that I’m very much a javascript newbie, but I do code in other languages (mainly SAS, a bit of Python, C++ and Ruby at home…
I’d love to see an example of this (table drag-and-drop), if it is possible!
Keep up the great work! Bye for now -
- Andy
Is it possible to embed a list that is draggable in the ‘Select’ object so we have a scroll of some kind. I am a newbie at this and really clutching at straws. Any help will be appreciated.
I wonder if anyone has a vb or c# edition of this that saves to a database using ajax on drop?
What would be cool is if there was a way where you could select and drop multiple objects at once. Has anyone played around with or figured out how to do that?
Can’t seem to get the drag and drop from one list to the other list to work. I have these files from toolman included:
coordinates.js
drag.js
dragdrop.js
You probably need to grab the changes to the files that I did. Unfortunately I haven’t kept up with any changes he’s made to the original code.
First of all: nice demo! Its almost hard to believe it is html and javascript and not flash or a java applet.
I seem to be having the same problem as andrea, though. I used venkmen to get the source for the 3 .js files and copied everything to my web server. Nothing seems to want to be dragged nor dropped anywhere when the page is on my server. There are no javascript errors and breakpoints set in various parts of the code in venkman verify that at least some of the code is being run. Any help would be greatly appreciated!
I seem to be having the same trouble as Andrea and Kristoffer are having. I have tried duplicating exactly the HTML, JS, and CSS as you have it, but for some reason it does not work at my end.
I would love to tinker with this and add some functionality if I could get it to work. That being said, my newbness will probably be revealed once I find out what the reason is that I can’t get it to work.
Ben,
Do you think it would be possible to have a sorted list, and then a two dimensional sorting list (as seen here http://tool-man.org/examples/sorting.html) and be able to drag between them? I’ve played with your code a bit, it just doesn’t seem to like the two dimension aspect.
Really nice work! Thanks for your generosity in sharing. People like you, Tim, Simon…. you make web development fun!
Looks promising. I tried to mess around with this and the original script a bit to get inspections to work, and succeeded… but then I found big & bad bug: When moving values from one list to another user may ends up losing values (boxes) IF he drops box to place other than original or destination list… Any idea how to prevent this / fix available?
I think in my code I purposely made it so dropping outside of the list deletes the item. I don’t quite remember what changes I made to have that happen, but it shouldn’t be too hard to have what you’re dragging just pop back into the list it used to be in. I think in the code there’s a section where I create a list in the DOM and then assign the dragged item to it while it is being dragged and is outside of any list. You could instead leave it as a part of the original list until the drag was over.
For the question above about two dimensional lists and dragging, I just never updated my code to use the newer tool-man code which does that kind of list. I would like to, I just haven’t had a good chance to take the time.
I actually got this to work by commenting line 100 “this.isOutside = true; “. This is kind of work-around and I though it would break the code, but seemingly didn’t.
Could you give some help how to detect IF the container already has item’s inside? I’m trying to make additional feature to allow user to point only one item to one container and return the item to it’s parent in case there was something, but I’m pretty much stuck, since I cannot figure out how to detect items inside container.
Hey, Ben,
I wanted to use this for a project of my own, so I restructured parts of the code and got a fairly bug-free version, with some bells and whistles (drops in whitespace send the list element back to its original position; smoother transitions between lists; a crude drag-scroll mechanism…). I’m happy to share, if you want to offer it up to people, but I don’t have a website; programming is just a sideline for me. shall I send it on to you, or to Tim? I’m not sure where the copyrights lie, anyway, so let me know.
Jane, just because I saw your email… you can get at the elements of one of the containers through ‘container.getElementsByTagName( “li” )’; if container.getElementsByTagName( “li” ).length yields zero, that means it’s an empty list.
Has anyone tried using this with indented lists? I have to make an interface to allow the reordering of menu elements but the menu can have multiple levels of sub-menus, so indented lists would be appropriate I think. If you have any tip or any other suggestion it would be greatly appreciated.
List1 could be dropped into List2, but List2 could not drop into List1?
Is it possible to make a drag and drop one way?
How do we use the setDragHandle? I can’t make it to work. I need to define a drag handle.
Please help
I am also having the same problem with scrolling. This topic has been reported multiple times on this list with no response. Has anyone found a solution?
Hi
I have put a list in scrolling div, but when i go down to the bottom of the div the item is not placed at the same place at the mouse.
how can that be fixed. look at http://www.ladelundefterskole.dk/test/test.php
regards Glenn
Hi All,
The script is working great. I was working on to make the copy/clone of item while draggig from one of the list. I would appreciate if somebody give me any pointers/directions to make it work.
Thanks in advance!!
Best Regards,
Inderpal Singh
where can I find dragdrop.js?
I saw the links to the three .js files in an earlier post, do you have the .css file? it seems to be needed for the example to work in my web container.
Thanks. Awesome work.
Sorry I haven’t had time to help out with many questions in a while. Here are links to all of the files that were used -
http://neb.net/playground/dragdrop/lists.css
http://neb.net/playground/dragdrop/coordinates.js
http://neb.net/playground/dragdrop/drag.js
http://neb.net/playground/dragdrop/dragdrop.js
I’am Argentinian, sorry for my bad english!!! first, your example is wonderfull !!! second i have a question, in http://www.fad.com.ar/drag.html have an implementation de your example with a error, one list is in a table, second list is in a layer, draging between list 2 and 1 the first item is ok, but drag the last items for example the item 35 on list 1 one stranger error it happens
you have idea that can happen?
thanks in advance
Fernando Dichiera
from Argentina the south America
Hi Ben,
Great work. It doesn’t seem to work when one list is too big (in terms of width), so the item never goes outside it(’isOutside=true’). Any work around?
Awesome!!! One thing though… if you drop a word outside of one of the two lists, it gets deleted… could you make it so that the word reverts to the list you were dragging it out of?
Ben
Thank you for sharing this tool. It has helped me bring some functionality to an ERP scheduling tool I am creating for our manufacturing system. Greatly appreciated.
Brian
Thank you ben. Your drag and drop solution is very scalable.
One problem I have is my list is contained in a scrollable div. When I drag the element out of the div, the offset from the scrollbar shifts the ghosting element away from my cursor.
Can you give me some advice, so I can fix this problem?
I am attempting to use a combinations of most of the examples above in an application that will run from an AS/400 (IBM iSeries). I’m updating the database using an RPG program. The idea is to drag cartons/units from one area or column and build a shipment. Dragging, dropping and updating seems to work fine.
The next thing I would love to accomplish is when I drop a carton into a shipment, I would like to have a window open or somehow display the contents so that I can choose what I want out of the carton to add to the shipment. We don’t always add the full contents.
I guess somehow I would need to determine the drop event and work from there?
Work in progress at: http://ecko400.ecko.com:8015/cgidev2p/drag
By the way, thank you to all the contributors. I have no idea how this works and would have no idea how to accomplish this without you. I’m a copy/paste/modify programmer when it comes to Ajax and JavaScript! I will make sure to leave full credit in the final code.
Hi,
I would like to drag the contents of a cell and drop it in another cell of the same table.. (using and not )
Sanks
I would like to drag the contents of a cell and drop it in another cell of the same table.. (using td tag and not div tag)
Sanks
when making that it works with scroll
will there be some solution?
this it is the code for the scroll :
<ul id="phonetic" class="sortable boxy" style="overflow:auto;clear: left; width:150px; height: 130px; margin-top: 10px; position: relative;">
Does anyone have a working example of this with elements instead of ones? Did anyone figure out how to get setDragHandle to work? I’m stumped.
Sorry, I should have said if anyone has it working with div elements.
Does anyone know how to dinamically add li elements and make them work ? if I run makeListSortable again, I get js error when dropping…
re: On December 28, 2006 at 6:10 am sanks Said:
I would like to drag the contents of a cell and drop it in another cell of the same table.. (using td tag and not div tag)
Sanks
———–
Has anyone found a solution for this? I’ve spent a couple hours trying and whenever I put another cell inside an existing one, all hell breaks loose as soon as I click anywhere inside the cells
Andrew
Has anyone found any scrollable (in a div or in the page itself) drag and drop scripts for lists?
I’ve searched for 4-5 days & can find tons of scripts that do either the scrolling OR the lists, but not both. I had hoped Willy’s solution would work, but it doesn’t in IE7.
Thanks in Advance,
Duncan
Duncan,
Did you find anything?
Brian
I am using this with Ajax, what i do is, I have two list and items from list1 is dragged and droppped onto list2. On click of a button, list1 changes and another list comes up i again make the two list draggable and droppable…even when my list2 remains the same(should i do so?)…anyways it gives me an error in coordinates.js at var parent = element.offsetParent; in northwestOffset function.
let me know if u get this…
element.offsetParent value is null basically, when list1 is updated by ajax…
This is absolutely brilliant. I am developing a system for online share trading and needed something like this so each user can customise the look of their site. I now have three columns which have their own boxes. I have one question though which I can’t see has been asked or covered. Is it possible to add some kind of resizing/sizing mechanism onto each box? So an individual could potentially resize any number of boxes and the position/width/height etc would be saved to the database.
This is a great resource. I am not a pro at this, but am studying as hard as I can to figure this out. I am trying to drag and drop between two containers. All is good except that the first container i have in a DIV with scroll bars because there are too many nodes to list outright. When I drag a node that is below the specified height in the div, the code creates a temporary clone and pushes it to the bottom. How do I get it to hold the node where the mouse is pointing at all times even outside of the current node? Any help is greatly appreciated.
Ben -
How does the script go about moving the items down when you drag it into a new list?
I’m using these utilities as part of a page that allows you to drag and then show/hide divs.
When I show the divs, I’d like to move the list further down so that it does not cover the buttons.
Hopefully, I could call the function that moves them down when the list is ’shown’.
Hello, i just wanna know if is possible to adapt this script to the Sorting within nested lists…
thank you so much, i hope your answer very soon!
PDTA: sorry my English…
hi,
>> The items being deleted when dropped out of any list is a leftover of the original drag script. It was set to use that as a way to delete items from the list and I left it in. I think it would be easy to adapt things to either bounce back to the last list it was in or maybe have that a configurable thing.
I need the item must be restore back to the original list when i dropped it outside any list.
what should i do?
please help me …
Can you send me the total codes for dragging and dropping between two lists which is given in your examples
Thanks
Regards
Is there any way to understand if the drag and drop has changed the layout or not, for example dragging an item and dropping it on the same place (the place of the item at the beginning),
if anything is not changed there is no need to call an Ajax script to save the settings.
I love this script but I’m having the same problem as other users. One of my lists is in a scrollable div and when I scroll down and drag an element away from the first list the element jumps down below the mouse pointer. Has anyone found a solution for this yet?
Thanks,
Brian