Multiple Drag and Drop between two lists with jQuery
I wanted this functionality for a project a while ago. I google’d and found that lots of others did too, but no one had done it. Or at least not in a way that I could understand. In fact, I’m not sure I completely understand it anymore. It works very well, but also it could have some improvement. I would like to be able to drag the mouse to create a selection, but this in itself poses the difficultly of how to distinguish a “drag-to-move” from a “drag-to-select”.
Still I found it an interesting proof-of-concept and maybe you will too. The test can be found here: Select and Drag Demo.
Excellent, just what I was looking for… The source looks kind of complicated, but maybe getting rid of ctrl-selectable makes it simpler.
Arpa
24 Feb 09 at 11:37
It would, but that would make it kind of pointless – as you would only be able to select one at a time and lots of libraries allow you to move one item at a time between lists.
Most of the code complication comes from the need to clone the selected list elements and work out hwo they are going to be positioned so when you drag them the **look** like they just move from their original positions.
Chris
24 Feb 09 at 16:03
Nice work! Any plans on making it sortable as well?
Stephen
2 Mar 09 at 20:37
Not any develpment at present, it was more of a proof of concept. I amazed me how difficult it was to code the functionality that was there, when the idea itself is so simple….
Chris
5 Mar 09 at 18:06
How to list item clone and clone item should be draggable
Tom
16 May 09 at 18:19
I have no idea what you just asked… but the answer is probably in the source code for the demo.
Chris
17 May 09 at 10:32
Wow, I wanted this functionality and expected a plugin would be available for this. Do you have any problem with the code being reused under a GPL, or MIT license?
Justin
25 May 09 at 08:57
Sure, I happy for this to be re-used under the MIT license.
Chris
25 May 09 at 10:54
Awesome! You may want to include the text from here http://www.opensource.org/licenses/mit-license.php in the header of the document. (At least that’s what I’ll do if I reuse the code somewhere)
Thanks!
Justin
26 May 09 at 01:44
That was a good idea Justin. I have done it.
Let me know if you make the code better! I only made it as a proof-of-concept – I’m sure you’ll find ways of improving it, even if it’s just to fit your purpose.
Chris
26 May 09 at 10:20
the only thing I am missing here is Sortable…
How can I add it???
Alex
2 Jun 09 at 15:49
i managed to get a list from mySQl database in the list1, and i wanted to ask if its possible to fill the list 2 back in the database when i finish draging from list 1 to list 2
ziad
11 Jun 09 at 07:03
@Alex
Tricky to add sortable to this, as we are already handling the drag/drop targets for each list. I gues you would start there, modify the
method to switch the drop action function depending on whether the items were dropped on the current list, or the new list – moving them around in the list if the dropzone is the same as the original list and changing lists if not.
Sounds a bit complicated, but perfectly feasible.
@ziad
Sure it’s possible! You want to use the serializing methods to get the data, then send it back to your server via AJAX, or a simple form. The method is:
And you will get a comma-separated list of the ids of the list elements (in order, so that’s where the sortable would come in handy…).
Chris
11 Jun 09 at 13:12
thanks for your reply, but the problem is that im not very familiar with ajax or even javascript:S
my html is:
Select:
<a href='#' rel="nofollow">all</a>
<a href='#' rel="nofollow">none</a>
<a href='#' rel="nofollow">invert</a>
<?php
include_once("../include/myconnect.php");
$sqlq = "SELECT * FROM category where has_childs='yes'";
$result = mysql_query($sqlq);
$c=0;
$HTML="";
while ($row = mysql_fetch_array($result))
{
$c+=1;
$id = $row['ID'];
$name = $row['Title'];
$HTML.="" .$name. "";
}
$HTML.="";
echo ($HTML);
?>
List 2
Select:
<a href='#' rel="nofollow">all</a>
<a href='#' rel="nofollow">none</a>
<a href='#' rel="nofollow">invert</a>
This list contains:
could i update my database table with list 2 ??
thanks again
ziad
11 Jun 09 at 14:28
lol, that is going to be a problem! a javascript function you could use would look something like this:
$.post(
'update_my_db.php',
'data='+encodeURIComponent($.dds.serialize( 'list_2')), //or whatever the id of the list is.
function(response){
alert(response);
});
}
and in the “update_my_db.php” file you can work with the data. Which you could work with as an array by doing
Remember though, you must give “id” attributes to you list elements, they got stripped out of the code you pasted so I don’t know if you kept them…
Chris
11 Jun 09 at 15:05
thank you very much, unfortunately i didnt use the tags thing for update, but i dd it my way:D hehe.
thanks again
ziad
15 Jun 09 at 13:34
Very cool!
lneely
19 Jun 09 at 21:32
Dosent work in IE 8….
Mats
8 Jul 09 at 12:21
Hi,
Very nice. I just run into one problem. You define ul and li global. Which kills all my other lists on the same page. But if I change this to .panel ul and .panal li all the .dds_* styles are not applied anymore.
It there a quick fix for this?
Thanks,
Michael
Michael
16 Jul 09 at 22:03
@Mats – That’s quite possible! I never tested in IE8 (and slightly shudder at the prospect…)
@Michael – Yes, it’s all about CSS Specificity (here’s an excellent article on the subject), so you need to add some specificity to the .dds_* style definitions.
try prefixing them like: .panel li.dds_*
Chris
17 Jul 09 at 17:58
Hi Chris,
Thanks – I forgot to add the li. – I was only adding .panel.
Thanks.
Michael
19 Jul 09 at 20:31
Nice script, is there a way to add a button as well and call the
$.fn.drag_drop_selectable.moveBetweenLists
to be able to move selected items from list 1 to list 2.
in addition to having the drag and drop?
I want to add a button –> and a remove button as well <– but im having trouble getting selected li.
Jose
12 Aug 09 at 06:14
Hi,
can we get sorting of items in List 1, with the existing multiple drag and drop functionality , i have a requirement which includes both sorting of items in list 1 and multiple drag and drop items from list 1 to list 2 and update on server .
I’m using RubyonRails as a Back-end .
plz suggest me …
thanks,
sri..
srinath
14 Aug 09 at 13:24
@Jose the $.fn.drag_drop_selectable.moveBetweenLists() function culd be used, but you’d need to use a loop as it only moves a single element between lists.
@srinath I suggested a way to do that to Alex in the comment above. It’s not something I have tried to implement myself.
Chris
14 Aug 09 at 15:36
I noticed if I have more than 100 items in the list, the selecting and dropping can be very slow. What can I do to make it faster?
James
24 Aug 09 at 16:48
Sorry James, but I really don’t know! I just had another look through the code. I didn’t make it very efficient in terms of the way I track the items in the lists and clone the existing ones. In fact efficiency was not on my priority list at all, I just wanted to see if I could get it to work.
Let me know if you make it any quicker! I’ve not been looking but I’ve not seen another script like this that is more polished – remember I only built this as a proof-of-concept. It would need a lot more work before I would consider it anywhere near production ready!
Chris
25 Aug 09 at 07:55
I really hope someone in the jQuery dev team will look into it.
Did you contact any of them?
Kissifrot
23 Sep 09 at 11:00
@Kissifrot, No I didn’t. Again, I didn’t ever make with a view to it actually being used. I wanted it for a project, but never implemented it in that project as it wasn’t good enough.
Chris
23 Sep 09 at 14:30
Hi Chris,
I’m trying to use the updateDB() function, but I have a problem, it posts the data twice.
Do you know how can I solve this problem ?
Thanks,
Bogdan.
Bogdan
24 Sep 09 at 14:08
You should put it
At least give jQuery team thoe link to the article 
Kissifrot
24 Sep 09 at 16:34
@chris~
I’m trying to adapt this to allow users to split the content of one large list into multiple groups. The one last sticking point is that I haven’t been able to figure out how to retrieve the id for the list container.
When I use an updateDB() function to pass the value in new_list_id, the value that gets passed into the db is get count[]+listID (if that makes sense at all)…
Are there any variables I’ve missed that would allow me to actually return a true reference to the list’s container id… or any other ideas on how to get at that value?
Soychicka
30 Sep 09 at 03:48
@bogdan – you’re probably submitting a form as well as the javascript POST, but without any other info, I can’t help.
@soychicka – now 100% what you’re after here, but the lists use a “dds” attribute to store their ids so you can access the original DOM ID from the list id with
Chris
30 Sep 09 at 08:03
Hi Chris! Very nice job with this drag-drop. It has inspired me to learn jquery
Can you help me with one problem?? I want to create new lists dynamically with clone. They have the unique dds attribute, but they are not dropable. I’m not able to find the fix. Is it nessesary to call some function on them, not just clone them??
Thanks
Peter
16 Oct 09 at 17:51
@Peter – not sure about “clone” but to enable the functionality on an element, you need to call “drag_drop_selectable()” on the jQuery object describing it/them. E.g.
The Options object is optional and simply overrides the defaults:
moveOpacity: 0.8, //opacity of moving items
ghostClass: 'dds_ghost', //class for "left-behind" item.
hoverClass: 'dds_hover', //class for acceptable drop targets on hover
moveClass: 'dds_move', //class to apply to items whilst moving them.
selectedClass: 'dds_selected', //this default will be aplied any way, but the overridden one too.
onListChange: function(list){ console.log( list.attr('id') );} //called once when the list changes
}
Chris
19 Oct 09 at 13:01
I’m trying to modify this to work with 2 tables instead of lists. I’ve changed all the ui ’s to tables and the li’s to tr’s. This does not seem to work.
Is this even possible?
Thanks!
Sam
20 Oct 09 at 22:52
@sam – It’s definitely possible! I can’t tell you how, but you should be able to. How is it not working? Remember Firebug and breakpoints are your friends!
Chris
21 Oct 09 at 07:55
Chris, thanks for your help. It is working
I’ve got also a comment for Sam. Changing list to table is possible. I’ve done the same, but I have changed “ul” to “div” and “li” to “span”. Try to use function “replace all” in your document. I’ve done it so and it was working
Peter
22 Oct 09 at 14:44
Hi,
I customized your demo app and when add a css attribute float:left for li, the elements are arranging side by side and now the drag drop is not working, when tried to drag and drop on list 2 , the element is reverting back to its normal position and this works fine when removed float:left
is it a problem with li ??
thanks,
srinath
srinath
23 Oct 09 at 21:07
I added float:left in
li {
———
———-
margin-bottom:5px;
float:left;
}
and now when i tried to drag item4 or item5 , the mouser pointer is showing image some where .
I need to display elements like a grid.
How can we overcome this ??
thanks.
srinath
26 Oct 09 at 09:59
When I try to use this with jquery 1.3 it gives me an error “jquery is not defined”. Does this not work with the new version?
Thanks.
Greg
27 Oct 09 at 15:17
@greg jquery should be defined by the jquery library. It seems you have not loaded it correctly or there is a scoping issue – try finding out where the call that triggers the error is. Has jQuery loaded by then? However whether the script will work with jQuery1.3 is not something I know the answer to I’m afraid… can’t see why not.
Chris
29 Oct 09 at 18:38
Hi Chris. Awesome work you done there! I have a little problem though: I have a page containing several lists. As it is now the user can drag and drop between all of the list but what I want is the lists to be connected two-and-two so items from a list is only dropable in a specific list. Hope you can help me out.
Lars A. Knudsen
3 Nov 09 at 08:10
@srinath The float will change things for the worse. The script uses all sorts of hacks to make the list items appear to remain in order when you drag them. This is done by inserting blank, inivisble <li /> elements and also by adding margins and padding. If the CSS is changed I suspect it will break a lot of things!
@Lars Of course! Just change the code so only some lists are drop targets and some are drag handles. If you need more than one instance then you will need to create some logic in the drop code to only allow drop by items originating from a certain drag handle. I’d be interested to know how you get on!
Chris
3 Nov 09 at 10:32
Thanks for the answer Chris. Unfortunately I have had to choose another solution than drag’n'drop because of too many elements in my lists. Web based drag’n'drop functionality isn’t ready to handle a thousand elements in a list. I was considering a solution with a scrollable list that gets populated as you scroll but that would take to long to develop (if at all possible). I’m turning my focus on the old checkboxlist instead.
Lars A. Knudsen
4 Nov 09 at 07:09
This is great!
How easy would it be to be able to drag from one of the lists into a text input field and populate it with the information from within the list?
Kevin Middlesworth
5 Nov 09 at 19:19
Can we show the drag count instead of showing all the drag elements .
When i select item1, item2, item3 and drag, it should show only item1 and showing count 3 on item1 .
Could you please suggest me some code .
thanks.
Srinath
24 Nov 09 at 08:16
@srinath – That’s so much easier than the multi drag drop I created. Why don’t you simply build that into a “regular” drag-drop script? The jQuery UI draggable and droppable are well suited to that end. The hardest part in this demo was “simulating” the movement of multiple list items and creating the correct spacing between them to make it look like they all move from their original places.
@kevin – thanks, and easy enough.
@lars – good descision, not convinced the web isn’t ready for it, but this script definitely isn’t!
Chris
25 Nov 09 at 12:43
Hi Chris,
Your code working nicely.
I want to regenerate these two lists from $.post response data. In my code the lists are displaying but the items are not selectable.
Please help me to fix this.
shalini
30 Nov 09 at 07:07
@shalini – are you making the lists “selectable” before or after adding the elements? I’m pretty sure you will need to build the list first and then apply the “selectable-ness” to it.
Chris
1 Dec 09 at 10:34
Hi Chris,
Your Idea is correct, but I don’t know how to set up this after $.post.
pls help
Thanks,
Shalini
shalini
2 Dec 09 at 08:54
@shalini – So you build a list after your $.post, then after it’s built run $(‘list selector’).drag_drop_selectable(); Exactly like you did in the domready section of the demo code.
Chris
2 Dec 09 at 13:08
Hi Chris,
Thanks a lot for the reply. Actually what I does is
document.getElementById('div_list1').innerHTML=data;
});
$.post('pic_list2.php', { update: 'list2' }, function(data) {
document.getElementById('div_list2').innerHTML=data;
});
I’m creating two lists inside those two div tags. What I want to do is, make selectable those two lists.
pls help me waht to do after this step. Sorry for the trouble.
Thanks,
shalini
shalini
3 Dec 09 at 11:02
Also not sure why you use “document.getElementById(…” when you have the power of jQuery to help? you code could be written more easily with the $ function.
You will of course also need to ensure both AJAX requests have completed… something like:
$.post('pic_list2.php', { update: 'list2' }, function(data) { $('#div_list2').html(data); tryDDS(1); });
var complete = [false,false];
function tryDDS(i){
complete[i] = true;
if(complete[0] && complete[1]){
$('#div_list1, #div_list2').drag_drop_selectable();
}
}
Chris
3 Dec 09 at 11:59
Hey guys,
Love the script…just what I was looking for!
Just wondered how difficult it would be to implement a double-click function, i.e. Adding in the ability to double click on an element and it moves it across also?
I’ve also noticed I seem to have to click somewhere on the page in order to get the Shift/Ctrl/Alt function working (I’m on a Mac though it seems the same on a Windows machine too), has anyone else noticed this?
Thanks in advance,
Christian
Christian
8 Dec 09 at 11:48
@Christian – Shouldn’t be too hard. Double-click events are supported in javascript. As for the Shift, Ctrl, Alt stuff I only tested in Windows/Linux land and so not sure how it would handle on a Mac. Check the source code, it may simply be a matter of changing the event.keyCode values in the global keyup/down handlers.
Chris
8 Dec 09 at 12:42
Thanks for the response Chris..
I had a crack myself after reading your reply and got it working so I figured I’d share it to help anyone else if they were wanting that functionality..
I’m very new to jQuery so I’m more than open to suggestions on making it better as it’ll help me learn too!
It works in my instance, but obviously some of the ID’s would need to be changed as it’s just how I got it to work on mine..
$(‘div.container ul li’).dblclick(function() {
var item_id = $(this).attr(‘dds’);
var old_list_id = $(this).parent().attr(‘dds’);
var new_list_id = $(‘#addusers_form’).find(‘ul:eq(1)’).attr(‘dds’);
if(old_list_id == new_list_id) { var new_list_id = 0 }
$.fn.drag_drop_selectable.moveBetweenLists(item_id, old_list_id, new_list_id);
$(‘#available_serialised’).html($.dds.serialize(‘available’));
$(‘#selected_serialised’).html($.dds.serialize(’selected’));
});
Christian
10 Dec 09 at 11:04
Hi,
If you want the list to be sorted automatically, you can use the tinysort plugin available at : http://plugins.jquery.com/project/TinySort and modify the moveBetweenLists by adding this simple line :
$(‘ul[dds='+new_list_id+']>li’).tsort();
Nice and easy
Arobas
11 Dec 09 at 15:38
i have 3 groups,
A, B, and C. how to keep child of groups A which is child of groups A moved to other groups?
thanks
waterbomm
14 Dec 09 at 08:25
drag and drop list box do not remove list 1 item
fenil patel
18 Dec 09 at 13:24
Drag and Drop Listbox : List 1 Item Drag in List 2 But Don’t Remove List 1 Item. It is Possible Please Reply.
fenil patel
18 Dec 09 at 15:34
@waterbomm Do you mean your list is split into subsets? I don’t really know how you would handle the situation in that case? The code would definitely become more complex.
@fenil patel I’m not sure I understand your question… If you mean that when you drag from list 1 to list 2, then the dragged item is not removed from list 1 despite being added to list 2, then I have not encountered this issue.
In any case do you have a link to an example page that demonstrates this issue?
Chris
18 Dec 09 at 15:59
Hi..
I am trying to add a list item dynamically to list_1, how do I refresh the list now so that it supports the newly added listitem.
Thanks.
Phani
9 Jan 10 at 00:11
@Phani – No idea. I don’t think the code can handle it as it is.
Chris
12 Jan 10 at 14:32
Was happy to see that code upgrades as-is to jquery 1.4 and ui-1.7.2.
One question remains: how to handle a case where one of the lists is empty ? In current code you can not drop an item anymore.
Frank
20 Jan 10 at 16:13
Where in the code would you introduce a .receive callback that handles only the new items ?
A list of all the items after the change does not make it easy to do a few ajax calls for db updates at the server.
Frank
20 Jan 10 at 16:29
@Frank It seems to work fine when one list is empty for me? perhaps your UL or OL has no dimensions when emtpy? That would stop you from being able to drop on it. In my demo (at least in Chrome 4.0.249.78 beta (36714)) it works fine.
There is no callback that just handles new items but you could add one. Probably best in the $list.droppable.drop function, as that is where the code loops through the selected items for dropping.
Chris
26 Jan 10 at 11:54
Hi Chris, very nice feature!
I have a problem when adding a new li dynamically. I add it using:
$(myUL).append(‘new li’).drag_drop_selectable();
What happens is that my new li works fine, but when i try to drag the old li in the same ul i get an error:
‘$.fn.drag_drop_selectable.stack[...].selected’ is null or not an object
Do u might know where i am going wrong with this?
Jack
4 Feb 10 at 17:59
Really great tool, I will look into it in the upcoming days! It would be really great, if you would check jqery browser (there is sg. similar?) for user agent, and use Cmd key on apple machines instead Ctrl.
Ctrl click is a left click on mac, so after receiving selection, entering and exiting context menu the plugin thinks Ctrl is still pressed, and behaves that way (multiple selecting/deselecting).
It is possible, that I will work with this code
, really liked the example. If so, I’ll post you the codes I used (though, might be that I will use the plugin with this multiple selecting by default, ’cause it suits my environment to select everything before dragging).
memento
28 Feb 10 at 18:06
Hi Chris & everyone,
Thanks for this nice jQuery goody !
Don’t know if anyone has managed to add the same-list-sortable feature.
My knowledge being what it is – far too limited to come up with my own solution – I was wondering if someone managed to modify the method droppable.accept as Chris mentioned.
Cheers
Jonathan
1 Mar 10 at 03:26
For a quick solution, I’m using Stomien’s jQuery browser detection, and modified your CTRL line like this:
var CTRL_KEY = (jQuery.client && jQuery.client.os == ‘Mac’) ? 224 : 17;
memento
2 Mar 10 at 21:01
missed the link
memento
2 Mar 10 at 21:14
http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/
(sorry, am a little tired)
memento
2 Mar 10 at 21:14
Hi,
i like the way this script works, i am no expert in javascript but can find my way around,
i am able to move things around and save state to db, i want to add logging so that i know who moved what and when. I was going to write the values of item_id old_list_id and new_list_id to a db table but realised the are the dds item values, is there a function to convert them to the id i give an item in the html?
cheers
Simon
3 Mar 10 at 14:10
Great job!
Does anybody know how to make a particular unselectable and hence non draggable. I have a list where there are some items (acts like a separator). i should be able to make those items unselectable.
thanks.
Kit
4 Mar 10 at 20:33
So good!!!! Thank you for such a great example!!!
me love you long time
Ollie
5 Mar 10 at 09:05
oops…the main word is missing. I meant how to make a particilar li non selectable
Kit
5 Mar 10 at 09:21
Hi,
In your code you are removing the item from list-1 when it is dragged to list-2. I dont want this functionality i want to keep the list-1 item as it is after me dragging and drop them in a list. Just a clone of the LI with a dynamic id need to be placed the destination List.
Also can i can have multiple drop targets like List-2, List-3, List-4.. So i can clone a item from List-1 while start dragging and drop them in the others lists(list-2, List-3..etc)
vicky
11 Mar 10 at 04:56
Sorry to everyone for my late replies to your comments. I’ve been rebranding! Anyway…
@jack the problem is that the li’s are bound on load. If you add them dynamically afterwards then you’ll need to bind them to function the same. I haven’t looked at how to do this to be honest…
@memento thanks for all you comments! I got your email and once I’ve had a chance to look through your code, I’ll post it up here.
@Jonathan thanks, but I don’t know of any progress to that particular query…
@Simon the code you are after is (for a “li” element:
@Kit find the lines:
//make all list elements selectable with click and ctrl+click.
and change the find('li') to find('li').not('.separator'). Untested, of course!
@Ollie Appreciated!
@vicky sounds like an interesting fork of this code. Let me know how you get on.
Chris
11 Mar 10 at 12:18
Thanks for nice sharing.
If you want to sortable the list too, try this
http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/
M2E
13 Mar 10 at 02:40
Hi Chris. I love the control, but am having a little trouble getting it to function correctly.
All the selecting and dragging and hovering seems to work exactly as intended, but when I drop an item on the new box it doesn’t get moved to the new box. Been messing around with it for a while, and was hoping you’d come across something similar! Thanks!
Michael
24 Mar 10 at 20:54
Nevermind! Hah, for some reason dropping doesn’t seem to work with jquery-1.3.2.js library that is the default asp.net mvc 1 jquery script. I switched out to the version in your code and it works fine. Guess I’ll have a look now to see what’s going on in 1.3.2.
Michael
24 Mar 10 at 21:01
Hello, great plugin, but I am geting some errors with new version of jQuery (jquery-1.4.2). And using Minify package.
Gogi
31 Mar 10 at 07:46
@Jack I’m just wondering if You get rid of this ‘$.fn.drag_drop_selectable.stack[...].selected’ problem?
@Chris I’m trying to do $(‘ul’).drag_drop.selectable() after dynamic appending to the list, but only just appended items are selectable. But after reloading page every thing works fine. How to get to beginning without reloading the page? Is there any global variable which should I delete? The thing is that after $(‘ul’).drag_drop.selectable() somewhere is still hiding old item_id from old list, so $.fn.drag_drop_selectable.replace(item_id); wont works.
slaw
31 Mar 10 at 13:55
@slaw – I just looked back through the code. It won’t be easy as the code binds event’s all over the place! So when you run it twice, there’s all sorts of events that get broken. If you need the functionality, I would really recommend having a good look at the code, and refactoring/improving it into a production ready plugin.
Remember: this is not production ready. It is only a proof of concept.
I expect people not to use it as-is, but to learn from it and create a good implementation themselves which doesn’t have the limitations this one has (rubbish with big lists, unable to handle dynamic lists, etc…).
That being said, I am still amazed at the level of interest it has caused. Maybe one day I’ll turn it into a useful jQuery plugin myself…
Chris
31 Mar 10 at 14:39
@slaw – no I still have that issue. If you happen to solve it please post it here.
Jack
2 Apr 10 at 17:03
@slaw – I just had a thought while re-reading your comment. You asked, “? Is there any global variable which should I delete?“.
It may not be prectical (and it’s totally untested…), but you may be able to use jQuery’s .clone() or even .html() function to “reset” the lists. Something like:
var $clone = $(this).clone();
$(this).replaceWith($clone);
});
//I don't think we can chain the next call?
$('ul').drag_drop_selectable();
Chris
2 Apr 10 at 17:12
Thanks for your reply chris. but I have found an other workaround. In the function ‘click.dds_select’ I just checked whether the clicked item is separator, if yes, just return.
I wanted to know whether its possible to rearrange items within a list. any guidelines will be appreciated. thanks mate.
Kit
13 Apr 10 at 13:10
Hi Chris
Where can I get the source to do that Drag and drop from one list box to another?
Thanks
Arnold
15 Apr 10 at 13:35
@Arnold – if you have a webkit browser then: view-source:http://thechriswalker.net/select-drag/ should do it, otherwise you’ll need to “View Source”.
Chris
15 Apr 10 at 17:13
excellent work,
saved me some hard working time
thanks
faton
26 Apr 10 at 18:31
Hi,
I am beginner for jquery and looking for simple multiple div drag and drop using jquery.min.js and jquery-ui.min.js only(like chris example). Chris is tough for me.Please help me if anyone can.I tried ui.multidraggable.js pluggin form jquery but not found useful.
jagu
26 Apr 10 at 22:19
Has anyone tried this fantastic bit of code with Google Chrome ? Even though the drag & drop function works fine, it’s just not pretty (at least with my own implementation).
Jonathan
27 Apr 10 at 23:45
I have 48 ul’s on my page contained in a div with fixed height and overflow set to auto. Is it possible to get the div container to scroll when dragging to bottom of div? I tried setting the scroll: true in draggable function but had no affect?
Barclay
26 May 10 at 19:33
is it possible to make the lists update to a sql database via Coldfusion? If so, how would I implement this code?
Thanks
J
Judson Terrell
23 Jun 10 at 20:42
Chris are you still following this thread?
Judson Terrell
8 Jul 10 at 16:43
Sorry Judson, I haven’t been monitoring this for a while.
In response to your question, of course you can!
Simply get the Javascript to post the list data to a handler you have written in ColdFusion that updates an SQL database. Pretty much exactly how you said. Somebody posted earlier about doing the exact same thing (but with PHP backend instead of ColdFusion – but that makes no difference…)
Chris
8 Jul 10 at 19:10
Hey Chris,
many thanks for the script. I’ve modified it so that original items get cloned and I’m dropping the items in a sortable list. So far everything works great, but I’m running into troubles when I select the draggable option “connectToSortable” (which normally requires the helper set to “clone”). This option allows me to have the dragged items interact with the droppable list (include placeholder css and so on) … the only problem is, that the items get dropped in multiple times. I guess the “connectToSortable” option provides its own mechanism of adding the items to the new list and so the function assigned to the drop event (in droppable) gets called twice (ending up in 3 items instead of 1 or 5 instead of 2).
I’ve poked around a bit with FireBug, but can’t seem to put my finger on the root of the problem.
Any ideas would be greatly appreciated.
Thomas
9 Jul 10 at 11:49
hello ,
Not working the jQuery version latest than jquery1.2.6.min.js
It doesnot work in jquery-1.3.2.min.js and latest
Any Ideas
Thank you
Hridaya
Heidaya
29 Jul 10 at 07:36