Drag & drop between lists
Ben Levy sent me this demonstration of drag & drop between lists:
I don’t know if you are interested, but I was playing with one of your examples of the drag and drop sortable lists and made some changes to allow dragging between multiple lists. I don’t really know how useful that would be, but it seems to work for the most part.
I think it’s pretty damn useful. I especially like that he highlights the drop targets.
This is EXTREMELY useful! Common use for this: a user updates a selection of items in his profile (e.g., a selection of zip codes that should be included in a report).
Any chance of obtaining your code?
Thanks.
JLS,
My examples and code are available here: http://tool-man.org/examples/.
The example of dragging between two lists was a modification Ben Levy made to version 0.1 of my libarary. You will need to ask him for that code.
Dragging between lists is a planned enhancement for my library.
I have had a shot at a page that lets the user change a page that is coming out of a database.
http://www.csseditor.com/dragdrop1.html
It is destined to be part of the realSimpleCMS
Anyone interested in contributng to this over at sourceForge?
I notice if I try hard enough I can completely lose the item I was dragging.
Any ideas for a workaround?
Mark, I need a bit more information to go on if you want some help debugging your problem. Browser version and how to reproduce the problem would help.
I am using IE 6 This happens with my demo page at http://www.csseditor.com/dragdrop1.html
If I grab something and drag it off screen (so no landing is highlighted) then the thing I dragged dissappears.
BTW have you seen www.piczo.com It has a pagebuilder drag and drop editor.
I think if the item I drag is too wide the ‘dropzone’ is never there so the item is lost.
http://www.realsimplecms.com/temp/index.html
Also if the dragable item only contains links and images as links the drag-cursor never appears.
Well, with every demo you guys have posted here.. if you Drag the Table to a blank spot anywhere on the page, the draged item desapears once you drop it. Anyone fixed this yet? And well ok.. whats the point of having it to drag and drop, if you can’t save it to your database.. or something.. Any updates ..
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/
I got this fixed..
>Well, with every demo you guys have posted here.. if you Drag the Table to a blank spot > anywhere on the page, the draged item desapears once you drop it. >Anyone fixed this yet? And well ok.. whats the point of having it to drag and drop, >if you can’t save it to your database.. or something.. >Any updates ..
But then there is a problem, when I move the mouse and added a scrolling functionality, the image, does not get stuck to the mouse, as in the aphabetical sorter, can u tell me the difference for the same.
I have created a script a year ago, which reorders a list: Reorder multiple fields in web page
I think it may be useful for some one. I use it in my CMS development. It includes serverside example in PHP and/or ASP.
There is also some good ideas such: auto alphabetical and numerical ascending and descending order viceversa order
This script is awesome, but if i let go of an item and it outside all containers, can anyone give me a hint to make it appear last in the left container?
What would be cool is if you could select multiple items (ala, the Windows Shift or Crtl keys) and drag them to the other list. Has anyone figured out this sort of functionality?
>Drag & drop between lists >Posted by Tim Taylor on April 15th 2005 to DHTML & CSS
>Ben Levy sent me this demonstration of drag & drop between lists:
>>I don’t know if you are interested, but I was playing with one of your examples of the drag and >>drop sortable lists and made some changes to allow dragging between multiple lists. I don’t >>really know how useful that would be, but it seems to work for the most part.
>I think it’s pretty damn useful. I especially like that he highlights the drop targets.
Do we have this achived with the new library ??
Hi - I’m using this to popular acclaim on my site. Thanks for writing it - looks very swish. Problem is, if I load up two lists of very different length and scroll to the bottom of one so that the whole of the other disappears off the top of the screen, there’s no way to drag an item from the long list back up to the short one. Can you think of a way I could add some code to maybe enable the page’s scrolling mechanism when the drag starts (like when you drag across text to select it) so that moving to the top of the screen with the dragged item would let me scroll back up to the shorter list?
For those who can’t figure out the dissapearing leafs.
This is a linked list so we just need to keep track of the original node.
firstContainer : null, lastContainer : null, currContainer : null,
the editor ate my response!
declaration - add a variable for the current leaf var DragDrop = { firstContainer : null, lastContainer : null, currContainer : null, // added
onDragStart - Keep track of the current leaf
onDragEnd - replace the isOutside check with this
I’m probably fishing here, but has anyone figured out a way to implement drag and dropping between two lists, one being the multicolumn, multirow list, and another being a single column list?
Hello. I was wondering if you would be interested in working with me in order to enhance your software to add the functionality to be able to drag items into sub categories. I’ve been working on it, it seems tough, and am seeking assistance. What I mean is instead of inserting before or after, you’d be inserting inside a new element. For the most part I have alot of it down, but its extremely buggy.
Let me know if you’re interested. I’m posting this where ever I can find an input box so you can see it.
Excellent code. I’ve used your sortable lists to produce questions (well, one so far) based on a scrambled list of operations. The unscrambled list is compared with the correct order and marked out of 10: see http://myweb.tiscali.co.uk/microelectronics/pcbDnD1.htm I’d like to have an array of photos and a separate list of captions to go with them, which have to be correctly sequenced and matched. I could do it as 2 separate lists, but would like the photos to be in a table form with a cell underneath to take the caption from the list. The caption would need to snap into the cell. I’ll have to understand the ideas behind DnD better before I can do that.
Have now got DnD from table cells into other table cell which can be checked and marked. Page layout now stays static, well fairly.
If you call DragDrop.makeListContainer on a list that’s already a list container, you’ll end up with lots of errors (the list gets added to the linked list multiple times and you can have a circular list).
To fix it, before adding a list to the linked list first search the linked list for it:
I was just wondering if anyone has figured out how to make the page scroll up or down when an item is dragged. A couple of my lists are longer than the page and it doesn’t scroll when dragged. Any help would be much appreciated.
Impressive stuff!
Going to try it right away for a Intranet application where you book resources for different exhibitions.
@twenger26: Auto-scroll: take a look at my page. There are 2 versions, one for Tim’s script, and one for Tom’s.
hi torp - where is your page? I could not find a link to it? I am looking for a way to auto scroll as well.
thanks
Ehm where has this link gone???? Anyway, it’s http://www.torporama.com/dragdrop/
Hi torp
Any idea how to “submit” so that the data can be “stored” and added to a database. And here I am thinking og Toms script.
what i want to know is how can i get out the names to store in a DB?
Peter Allan Joan
Regards GF
Hi, some weeks ago Peter Rehm posted a solution using Sajax on Tom Westcott’s scripts, in Tom’s blog. Unfortunately that blog is down now. Here is a link to Peter’s website. Click on ‘Beispielseite’ for a working demo.
Hi, I would like to keep data on the left list.
Example : when I click an element on the left list, the element keep in the list an a copy is draggable on the other list.
How can I do that ?
Thanks
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
These are very useful scripts, and I am sure will find a significant place in the new web functionality. I have been searching for this type of dragging for really long time.
What I just want to ask you: is there a way to limit the number of the element s in the second list (sajax2) and to order it horizontally, with size of the list items 100×100px?
Many thanx in advance! Dna, quebec
Really great script - Impressive and very useful! Saves me alot of time!!! Thanks!!!
Australian job
Well… Nice blog!
I’ve been working with the drag & drop code, which is the best I found sofar. The problem I tried to tackle is that if you nest the lists, you can’t drag in the sublist. You would want to drag a list including the sublist if you drag the parent, but if you drag one of the children you want this to drag separately. I found that if you add window.event.cancelBubble = “true”; to the end of the function ondragstart, it works more as you would expect it to (in IE anyway). The only problem i still have: you can drag a child one level up, and you can change the order, but you can’t drag a parent a level down.
this is a great script guys. i was hoping that when items werent successfully dragged to the other side, the items wouldnt get lost. i am very interested in using th is
i plant to provide the user with a set of columns in the db table and he has the option to select which columns the report will contain. so he has to drag the columns that he wants to appear in the report to the other side
yeah this script is great. it’s not heavy too. would be nice if that item lost (when it’s out of bounds not being dragged to its destination bug) gets fixed
Having a problem which I think can be solved by the above script by Sam - but the script looks incomplete.
Does anyone have the full function?
Any help, much appreciated.
Can anyone help find the rest of the script by Sam - I think it will solve my problem…?
Can anyone suggest a site that has a lot of ASP.NET dropdown components and such to view? I am developing a new production music library site and want to see the latest options for consideration.
R. Hughes www.productionmusiclibrary.com Production Music Library - Urban Dropz
I think I fixed the disappearing image problem. Here is the code I changed on dragdrop.js: onDragEnd : function(nwPosition, sePosition, nwOffset, seOffset) { // if the drag ends and we’re still outside all containers // it’s time to remove ourselves from the document if (this.isOutside) { var tempParent = this.parentNode; this.parentNode.removeChild( this ); tempParent.parentNode.removeChild( tempParent );
The benefits of tim’s drag and drop lists are fair-to-good cross browser support, concise packaging, and (with the link at the top to Ben Levy’s page), drag and drop between multiple lists.
The benefits of techniques found on david walsh’s page (links) are ajax / database support and (IMPORTANTLY) the use of the alt attribute when serializing the list in order to pass the parameters / values somewhere else.
link: http://davidwalsh.name/mootools-drag-drop ajax example: http://davidwalsh.name/dw-content/sort-save.php
Found the current version of DragSort no longer works with IE8. So as a result I wrote my own version based on jQuery, and added the ability to drag between lists. For those interested you can obtain it here: http://dragsort.codeplex.com/
Thanks tool-man for your version though, I’ve been using it for the last couple of years.