I’ve put up an example page that takes advantage of a number of Scriptaculous features to allow the following:
- Drag and drop items within a group
- Drag and drop items between a group
- Drag and drop groups
- Create new groups and drag items into the new group
In doing this, I used a couple Scriptaculous features I hadn’t used before:
- Many of the options in creating sortables to limit where the item could be dropped
- The Bulider object to create new groups
- The Sortable.sequence function to get the order of items in a sortable as a JavaScript array
A lot of people have posted comments here asking if there is a way to drag items between lists. Obviously, Scriptaculous has provided this functionality for a long time, but there aren’t many examples out on the web showing how to use it…so my new example page is an attempt to show it off – congrats to Thomas Fuchs for putting together such a useful library that is such a pleasure to use.
March 15th, 2006 at 10:34 am
It would be great if you showed how one would duplicate items upon dragging and dropping and also dragging between multi-column/row list.
March 15th, 2006 at 11:49 am
awesome example, just one question i tried setting it up to use images.
i need to be able to sort the images within each section as well but if you look here
http://turk-182.com/eMortal/admin2/test2.php
you will notice you can not drag an image side to side onliy up and down. is there something i am doing wrong or somethig i need to add ?
any help would be apprciated
March 15th, 2006 at 11:51 am
sorry to addon just wanted to add this is how i woul dlove to have it setup but be able to move them from one list to another.
http://turk-182.com/eMortal/admin2/testSortable.php
March 15th, 2006 at 7:57 pm
Greg,
I actually found your SLLists example page a few days ago and got a working version on my own of dragging and dropping between groups before I found this new example page. The thing I can’t seem to get to work (and I notice your example doesn’t do it either) is the option for for hoverclass on the droppable element. The test pages that come with the scriptaculous library do it and seem to have no issue when I copy that code into my own demo page. But I can’t for the life of me get it to work with SLLists.
Are you able to do this or is this a limitation right now? If you can do it, can you post an example of how you did it?
Thanks for sharing your work and demo pages!
Jona
March 16th, 2006 at 11:41 pm
got it
http://turk-182.com/eMortal/admin2/test3.php
March 21st, 2006 at 12:24 pm
The advanced sortable http://www.gregphoto.net/sortable/advanced/ is just fantastic.
Any chance of getting a demo working with php and mysql like for the SLLists0.02?
Thanks for making all these great code samples available here.
March 27th, 2006 at 12:50 pm
Would it be possible to create sub-groups (groups within groups) and dragging to and from those groups?
Great examples and very useful!
April 6th, 2006 at 7:43 pm
Great example. Is there a way to make this happen: I drag an element from one group to another, but that same element (which is added onto the second group) stays visible in the originating group after dropping?
April 24th, 2006 at 9:11 pm
For some reason, updating the js files to the latest version of scriptaculous causes nested divs using Sortable.create to break. The demos you have given are fantastic, but do you know why the lastest version of scriptaculous causes a problem?
April 29th, 2006 at 3:17 pm
First of all the demo is pretty sweet.
However, I have the same problem as Jack. I can’t get nested divs to sort with scriptaculous 1.6.0. The nested divs will sort but their parents won’t sort. Anyone have a solution?
May 6th, 2006 at 7:12 pm
Greg, I luckily stumbled on to your example while perusing the scriptaculous site.
I too am wondering if you’re considering making it compatible with scriptaculous 1.6.1. I wasted several hours trying to make it work before realizing you were using 1.5.3. I’m not complaining though ’cause you still saved me tons of time in the long run.
BTW, very attractive girlfriend.
May 6th, 2006 at 9:33 pm
A quick follow-up re: Greg’s example.
When clicking on the Debug button, notice the first 3 group ids are “group1″, “group2″ & “group3″. This is because they are hardcoded into the page. Any additional group ids added dynamically via “Create New Group” are assign a numeric value only, based on the length + 1 of the sections array.
I wanted all my groups (hardcoded AND dynamic) to have the same prefix so I modified the createNewSection function ever so slightly to accommodate this.
The modified function can be found below. Only 2 lines were changed. First, a ‘prefix’ parameter is passed to the function. Second, the prefix is concatenated with the new group div id (sections.length + 1) in the line which defines the newDiv var.
When calling the function, simply add a string prefix value (in this case ‘group’):
onClick=”createNewSection(’group’)
————————————————————————————–
function createNewSection(prefix, name) {
name = $(’sectionName’).value;
if (name != ”) {
destroyLineItemSortables();
destroyGroupSortable();
var newDiv = Builder.node(’div’, {id: prefix + (sections.length + 1), className: ’section’, style: ‘display:none;’ }, [
Builder.node('h3', {className: 'handle'}, name)
]);
sections[sections.length] = newDiv.id;
$(’page’).appendChild(newDiv);
Effect.Appear(newDiv.id);
createGroupSortable();
createLineItemSortables();
}
}
May 6th, 2006 at 9:59 pm
A quick addendum to my modified createNewSection function.
In the event a prefix value is not passed, add the following second line to suppress the prefix:
function createNewSection(prefix, name) {
if (prefix == null) prefix = ”;
May 7th, 2006 at 3:10 pm
Great job! This was exactly what I’ve been looking for! I’m using it as part of an open source weblog system I’m working on.
I got it working, but now I need to figure out how to get the position variables into the database. I’m a php programmer, and I don’t know much about javascript. Could you give me a simple example of how I could do this?
Thanks a lot! wonderful script!
May 10th, 2006 at 8:13 pm
You must have read my mind because that’s the next task on my to-do list. All of this wonderful functionality is worthless if you can’t save the groups and items.
I don’t have anything to share yet, but here’s a related requirement (for me anyways.)
Currently when creating a new group, there’s no method for storing the name of the group (i.e. “Group 1″). This is essential for my application and I suspect for most others as well.
The solution is to add an id to the h3 tag. In the createNewSection() function, find the following line:
Builder.node(’h3′, {className: ‘handle’}, name)
and change it to:
Builder.node(’h3′, {className: ‘handle’, id: name}, name)
To view the name when pressing the debug button, add the following line In getGroupOrder() at the top of the function:
var headings = document.getElementsByClassName(’handle’);
and then output the name along with the rest of the data:
alerttext += headings[i].id + ‘, ‘ + sectionID + ‘: ‘ + Sortable.sequence(sections[i]) + ‘\n’;
Now ALL the data is ready for submission. You can either GET or POST the data. I am opting for the latter because my application could potentially have many groups containing many items which could exceed the querystring maximum length.
To be continued.
May 11th, 2006 at 10:58 am
I am wondering if anyone has tried tackling the task of adding to “items” to one of the groups, as well as adding groups themselves. If anyone has made that possible, sharing that information would be greatly appreciated.
May 12th, 2006 at 12:23 pm
I changed my name so as not to be confused with the other John.
Adding new items to groups should be easy. If you intend to save the items, each will need to have a unique ID. You could assign a zero to each new item and then create new records after passing them to the server.
May 16th, 2006 at 11:01 am
I added a D to my last name for the same above reason, I am now able to add new groups, add new items as well as delete groups and items and still retain the group and item orders. Its all working quite nicely. As far as submitting data, I just put text boxes inside the group div and item div instead of showing the name group1 or item1, mainly to suit the requirements of the project I am working on.
May 18th, 2006 at 4:00 pm
As promised, here’s my function to submit the groups and items to the server for processing.
function submitSections(theForm) {
var handles = document.getElementsByClassName(’handle’);
var sections = document.getElementsByClassName(’section’);
for (var i=0; i
A couple of things worth noting. First, each element is submitted as a hidden field (with the help of the insertHidden() function.) Second, the name of the section is stored in the handle div ID. See my previous example for more details.
In the action page you can loop through the groups and items using foreach.
May 18th, 2006 at 4:08 pm
John D,
How’d you implement the delete group function? Do you check to see if the group is empty? Once deleted, is there a gap or do the remaining groups slide into position?
I’m also going to replace the static group label with a text box so the user can edit the name.
May 18th, 2006 at 4:10 pm
M0st of the code in my previous message didn’t appear. I probably need to escape my gt and lt characters. I can repost if anyone is interested.
May 18th, 2006 at 6:00 pm
Anyone know how to include a text input field within the H3 handle using builder.node? For example:
\Group 1: \\
From Greg’s example, I want to add the ability to edit a name after creating a new group.
May 18th, 2006 at 6:02 pm
Pool 1:
Repost of example HTML
May 18th, 2006 at 6:04 pm
WordPress blows.
May 21st, 2006 at 8:22 pm
Has anyone determined how to get this working with Scriptaculous 1.6.x?
May 30th, 2006 at 9:11 pm
I’ve updated the example to work in Scriptaculous 1.6.x and wrote a quick blog entry explaining the changes I made.
January 25th, 2007 at 12:58 pm
“Would it be possible to create sub-groups (groups within groups) and dragging to and from those groups?”
I have tried this and have it working with two minor bugs that I am having issues with.
First if you simply allow the page and the sections to accept sections as well as listitems, you can drag and drop and make sub groups no problem.
EXCEPT:
If you create a new group, any group that is contained within another group is no longer draggable, but is dropable and its immediate parent is no longer dropable but is draggable. Also, the lineitems with the group that is no longer dragable are themselves no longer draggable.
Using Firebug, I confirmed that the sections in question are not included in the draggables collection or the dropables collections respectively.
Is this a scriptaculous bug or am I using the code wrong?
email me a johnnycannuk {at} geee-male dot com if you need the code…
February 15th, 2007 at 5:12 pm
Hi.
Is there a way to delete any content from this drag able page? lets say each picture/data comes from the database table, and if i want to delete 1 or many records, I just want to click Cross section on side of each div which will result in deleting that div and also the record from the table.
is there a way to do this?
please help
thanks
February 19th, 2007 at 7:22 am
I love all these examples, truely amazing! I was wondering how to include the name of the image and possilble other info from each record when dragging to reposition each one. IE. An image + name underneath would surfice. I guess you use some kind of div container to do this? Any thoughts??
April 13th, 2007 at 1:47 pm
Does anybody knows if it possible to limit the number of elements that can be dropped in a sortable container ?
May 9th, 2007 at 4:53 am
Your solution ist very good. Im my version I have added the function to add a item.
Here is it:
http://familientagebuch.de/rainer/2007/19.html#i47
Now I’am looking for a posibility the drop (remove) items. Any ideas?
Rainer from Hamburg/Germany
June 12th, 2007 at 11:05 am
Hi John H
I have got the drag-and-drop working really nicely. But I just need to post the sequence for group2 to the processing page.
As you said your
function submitSections(theForm)
is not complete, would you mind re-posting it?
Thanks
July 6th, 2007 at 5:34 am
Hi!
Loving the group/section drag and drop! Trying to recreate it now, but having trouble actually pulling the sections into the groups with the php code…nearly a beginner…
If there’s an example to download, I would be able to crack it from there, but I can’t find anything…
Quite a complex database system too, so it needs to update one database with the sections in (these are food dishes) and another database with the groups in (the categories)…any help really is appreciated!!
Thanks
Matt
July 31st, 2007 at 8:06 am
Excellent demonstration of a cool library.
I’ve been unable, however, to adapt this to something specific I’ve been looking for.
I want to make a drag-and-drop schedule, in which a list of options is populated based on previous user selections. The items in this list can be dragged and dropped into a daily schedule with 4 morning slots and 4 afternoon slots.
So far I’ve adapted this multi-list sorting to have the ‘available options’ group and the AM/PM groups. So, my question is:
1. How can this be modified so that moving something from ‘Options’ into one of the sections leaves a copy of the original in the ‘options’ group?
2. How/Can the AM/PM groups be limited to accept only 4 options?
3. How/Can options be removed/deleted?
August 1st, 2007 at 11:56 am
sortable/advanced/ – Would it be possible to create lineitem dragging for an only group
October 1st, 2007 at 1:41 am
Thanks for an excellent article – your demo is doing exactly what I am trying to do in my current app and has saved me a lot of head-scratching!
December 3rd, 2007 at 4:31 am
Is there any way to do this in Ruby on Rails ??
I have been trying to do use sortable along with draggable but unsuccessful.
December 10th, 2007 at 1:09 pm
i have implemented the sortable list thing, and it works great.
However, I am trying to implement the dual list thing, where each item not only has a position row, but one to determine which list it belongs.
However, i am confused. I have been looking for an example of this, and not finding one.
Suggestions?
January 9th, 2008 at 11:47 am
Does anyone have sample code to add new items to the existing groups.
I’ve attempted to do this; however, whenever I add a new item my dragging and dropping functions seem to not work unless I add a new group after I add the new item.
Any help would be appreciated.
December 19th, 2008 at 1:13 am
Guys… it might sound stupid :s but where is the link (if there is) for me to download the samples of this example? :S
Im trying to learn PHP and Javascript… and if I can see the code I would understand better how this whole page works and It’s great for the website I would like to make.
I got how the Drag n’Drop works… but I don’t understand how to save the new order of the elements on the DB (I’m using PHP and MYSQL).
Thanks a lot!
Gill
February 26th, 2009 at 4:49 am
hi guys,
this is really a great script, it save a lot of time for me. I have now only one more thing I def. need for my application.
I have to limit the amout of items a user can drop into one group- does anyone can tell me how to do it?
thanks a lot for the help
Robby