I was playing with Tim Taylor’s excellent List Drag and Drop javascript and came across the multi list version by Ben Levy.
I made a few modifcations to it adding a “trash” container so that items that are dragged and dropped outside of an area are not lost.
I also added some php to make it persistent by saving the layout inside of a mysql database.
You can see an example and check the php source.
Something like this would be cool for CMS layout editor.
Updated again (15 July).
I have put in an example of updating the database using SAJAX so user is not required to click submit to update the layout it is done automatically when they ‘drop’.
Added a group feature so you can group certain lists together and cannot drag and drop to a list outside of the group.
Updated again (18 July).
Made the php more secure, was not concentrating very hard on that part when I made it!
July 14th, 2005 at 12:31 pm
No longer need a trash container added the bounce back feature.
July 15th, 2005 at 3:22 am
Incredible what you created. First I wanted to change the Ben Levy’s script to do exactly what your script does (trash can & saving the new order of the elements), but because of my lack of knowledge of this parts of JavaScript, I had to look and found your solution.
I use it for a broadcast-distribution-software for a local TV-station in Austria. With the drag&drop-functionality, you can choose the broadcasts you need for a certain area and sort them in the way you want, then you click “Distribute” and a complete tv-show is created and automatically distributed to the region-specific network.
Quite interesting and probably an unexpected way to use it…
Thanks for your work, without you I really would have problems…
July 15th, 2005 at 5:04 am
Tom,
that is great work. If we could convince Tim to implement something like dragging a copy of a list item.. and I can die a happy man.
July 15th, 2005 at 9:58 am
Dragging a copy? do you mean cloning the item when you start to drag it giving you two copys?
July 15th, 2005 at 12:53 pm
Tom,
yes I meant cloning.
I am building an interactive team selection component for my clubs website and players can play in multiple teams each weekend… So I need be able to assign same player to multiple teams…
July 15th, 2005 at 3:43 pm
Tom,
The drag drop library of Walter Zorn can do cloning for images.. maybe this you can find some inspiration pointers how to do this for layers http://www.walterzorn.com/dragdrop/dragdrop_e.htm
July 15th, 2005 at 5:11 pm
Hi,
Great work. Nice script!
I am trying to do the following:
i have tables laid out horizontally (for example say there are 5 tables). Now tables have the following numbe of rows:
table Rows
=========================
table1 3
table2 4
table3 1
table4 3
table5 5
I have to give user flexibility to:
1) I need to drag the whole table i.e. exchange position of table1 and table2 etc.
2) I need to exchange rows in the table itself.
3 )I need to exchange rows from one table to another.
Is it easy to do this? How should i go about this? I am not DHTML pro, basically system programmer.
Any pointer to solve this will be highly appreciated.
Regards,
Dipesh
July 15th, 2005 at 8:31 pm
Updated again.
I have put in an example of updating the database using SAJAX so user is not required to click submit to update the layout it is done automatically when they ‘drop’.
Added a group feature so you can group certain lists together and cannot drag and drop to a list outside of the group.
Ulrich,
That sounds like a very cool feature to able to have. I think it can be done fairly easily I will have a look into it.
July 16th, 2005 at 7:14 pm
Dipesh,
You could maybe implementing the table swapping as the parts are swapped here:
http://kiwi-interactive.com/experiments/inlineEdits/drag.html
to swap rows in the table(s) I am not sure you try implementing them as lists instead and swapping them that way?
July 17th, 2005 at 10:35 am
Super cool mod Tom. Now it does everything I wanted. You just made my day
Thanks for the code.
Cheers
Tyler Leeds
July 18th, 2005 at 11:05 am
Tom,
seems that someone manged to break your 1st example… no items left in the lists….
July 18th, 2005 at 11:11 am
Thanks for heads up, I guess that can be done by sending a post with no data ak :/
July 18th, 2005 at 12:10 pm
Made the php more secure, was not concentrating very hard on that part when I made it!
July 19th, 2005 at 5:17 pm
So I’m playing with a version ripped from Ben Levy’s example, and I’m trying to figure out a way to pass the position of each element as a regular form element:
http://dewey.umflint.edu/drag_and_drop/
I can’t use ajax for this; I just need a regular form parameter (or set of form parameters) that contain the info.
Any ideas? I sure could use them! (-;
July 19th, 2005 at 8:09 pm
Hey Gary
Here how my version achives this
When the user clicks the submit button the onclick event calls the javascript function getSort() this function calls a function in the dragdrop.js file I added called serData() basically it returns a formatted string of the order of the elements in the diffrent lists. This string is then loaded into the hidden form field called “order” so it is passed a long in the POST to the php script where the hidden field is then parsed by the php function parse_data() to return a usable array.
Hope that helps!!
– Tom
July 19th, 2005 at 8:31 pm
Hi Tom–thanks for the tip. I tried it, but to no avail (!). Well, some avail, actually. If you go to the page
dewey.umflint.edu/drag_and_drop/
and click the button, it DOES show the hidden input field parameters–it’s blank, with commas delimiting each entry, but with nothing to delimit. It’s very strange, like there’s data that’s supposed to be passed there. Am I doing somethign wrong? Any ideas? I’m growing despondent and have taken to randomly throwing variables around to see what’s what …!
July 19th, 2005 at 8:45 pm
Hey Gary,
Looks good the serData() function uses the ID tags of the li element as the name for the items add these to your list item and should should be good eg
<li id=”fg”> Fred Goodman </li>
If you dont want to use the id and instead want to use the list item name change this line of code in serData()
string += items[i].id;
to
string += items[i].innerHTML;
Good luck!
– Tom
July 20th, 2005 at 7:12 am
Tom, you are da man! Seriously, thanks–this helps a lot!
July 21st, 2005 at 12:06 pm
Tom, I also want to add my thanks for this. I’m still trying to figure out how I can use it, but it’s really cool!
July 22nd, 2005 at 1:47 am
This is SO AWSOME!
http://www.dlplp.com/v6/test (login: dlptest // pass:0123)
I have been working on this for few days now and I saw ur post after i had made a post on Tim Taylor’s Blog so that’s how I got here..
well..what I wanted to add here was: You alredy got the functionality of the tables to be dragged and dropped PLUS: (the big one) you made it save into a database and even better automatically..Now my question to you (thats if u check my page out) is, ok adding to the drag and drop funtionality can it be done so that you can also edit content inside the tables… and save them automatically to the database too?
And a HUGE step, making like a style page, in which users could go in and select an order of the tables to be displayed like..
some thing like : adding tables/deleteing, moving (up/down/left/rigth) between other category tables. or soemthing..
it might sound like a lot but don’t it sound so cool?
lol
– Juan
July 22nd, 2005 at 3:42 pm
I seems as if javascript is back in the limelight with the recent ajax coverage and this appears the be the end of the trail and the leading edge of tech. im looking to take this further with standard ui like ctrl click copy drag & shift click move drag - also ctrl click multi select and shift click rnaged select of items for ajax interaction
has anyone come across any of similar work with javascript drag with which to build on or is the the end of the trail
btw - this is shit hot and i think its tech that flash has been teasing us with for ages but never delivered.
any pointers appreciated.
A
July 23rd, 2005 at 11:22 am
Hi,
This script is exactly what I needed. But I am trying to make nested draggable lists, so I need to be able to set a handle. I tried editing the source a little but I didn’t manage to find a way. is there anyone who could help me along a bit?
-Joris
July 23rd, 2005 at 5:19 pm
Juan, I think you can use part of Tim Taylors javascript library to do inline editing? (http://tool-man.org/examples/edit-in-place.html).
As for the other part I think you need to mess with php some more.
Adam, it looks like you have got your work cut out making something that interactive, but it sounds very cool please keep me updated on how you get along with it.
Joris, how do you mean set a handle ? You only want to drag items inside the lists that are nested?
– Tom
July 23rd, 2005 at 5:55 pm
I think what Joris means is having the functionality of been able to not only drag The lists but also drag the complete set to another place.
Lets say you have three colums: Left, Middle, and Right
Left has 2 dragable lists.
Middle 3
and Right only 1
The lists inside all of these can be dragged between the lists.
But what I think he means is Been able to move Middle to Right or left
Left to Middle or right. or Right to middle or left..
Bringing with it all the lists inside of it… (am I making sense?)
===============
Another thing, I have tried to do the Inline Editing inside your code but the function:
===========================
window.onload = function() {
/* var list = document.getElementById(”left_col”);
DragDrop.makeListContainer( list, ‘g1′ );
list.onDragOver….
============================
that is part of your java cancels the funtionality of being able of drag items and editing them from Tim Taylor’s scripts:
I’ also found this other great script that lets you save your edited content from a table into the database somewhat like what you did with your script to send it to a DB with AJAX.
http://labs.revision10.com/experiments/dat/dat_example.php
and I have been working on it but I’m not a big expert on PHP and Java just yet.. so I’m playing around with things at the moment.
Here’s my sample of what I’m working on with your script:
http://www.dlplp.com/v6/test/dd.php
and the one for editing fields:
http://www.dlplp.com/v6/test/edit_fields.php
so I still got a long way to go.. specially for me cause I’m just not that knowledgable with PHP and JS
August 4th, 2005 at 1:45 am
Nevermmind, the Problem was fixed… it was the window.onload = function() {
function because it was loading two at a time, so it blocked the other..
Now I’m trying to get it so that it edits the fields and saves them automatically.. but no one seems to help.. so I’m like so stuck..
August 4th, 2005 at 1:33 pm
In response to the person who wants nested trees to be sortable, I came across an interesting script. It’s still rather beta, but it might give you an idea of how to go about it.
http://mir.aculo.us/stuff/test-tree/tree.html
August 4th, 2005 at 4:34 pm
Also, on Tim’s website he had an example of sorting items in two dimensions, I believe with his scripting he did it simply with a float:left to make the elements bunch up together. I’ve tried a few ways to get it working with this script, but to no avail.
Ben
August 9th, 2005 at 5:00 am
Wow! The dragging and drop between lists is a very cool feature. I want to use this in a cms that I’m constructing at the moment. I’ve implemented a solution of the (original) edit in place sortable lists by Tim Taylor, and was wondering if these two awesome scripts can be combined. Since I’m not that kind of a javascript expert (adding a the feature that the edited text on the button in the example could be saved, cost me all day :’( ), is there anyone who has any idea of how to acomplish this?
Further more, I’m wondering if it is possible to add a second layer to the edit in place feature. This would make it possible that not only the text on the button (as shown on the button) but also the target-link of the button would be editable on the same page. My idea is that selecting these editable fields would happen with a single or a double click. (Clicking the button once would result in editing the text on the button, clicking twice would result in editing the a href of the button.)
With this added feature it would be possible to make an all editable sortable list. That would be a great feature for editing menu’s in cms-es everywhere! Ideas? Anyone?
(notice, I’m posting here, because of all the idea’s in the previous posts, thinking it would be better to group all the idea’s)
Greets,
Jeroen
August 9th, 2005 at 12:29 pm
Hi, I’m trying to get the drag/sort code working with lists that have overflow:auto or overflow:scroll. It seems when you set these styles on (to force overflowed content to be scrolling content) a or the lists items tend to blow out of the boundary created by the or width and height properties (at least in IE, in FFX the boundary sticks, but then when you drag and sort the list items flicker and become offset in an obstrusive way). I’ve narrowed down so far to the
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = “”;//ToolMan.css().readStyle(element, ‘position’)
if (position == ’static’) {
element.style[”position”] = ‘relative’
} else if (position == ‘absolute’) {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
return group
},
That is causing this undesired effect.. these ‘repositioning’ commands.. any help would be appreciated.. i’m still gonna try to debug this
Thanks.
Omar
August 9th, 2005 at 3:17 pm
Hi Guys
I was wondering , that if it is possible to do a copy and drop rather then a drag and drop, what I mean is that rather then moving the object and dropping it to some place, can we leave a copy of the original there and basically paste an instant on the drop place ?
Thanks
August 9th, 2005 at 3:21 pm
An example for my previous comment would be, like chossing and picking up an item for a shopping cart .
Thanks
August 9th, 2005 at 4:32 pm
Check out
http://script.aculo.us/demos/shop
for an example of a shopping cart
August 9th, 2005 at 6:16 pm
Any way to unregister a list? I’m dynamically adding material to my list and I’d like to be able to unreigster the list so I can re-register it with the new material. I run into problems if I just re-register the same list. (IE crashes).
By register, I mean:
DragDrop.makeListContainer(parentHolder,’s1′);
August 9th, 2005 at 7:00 pm
Thanks Ben
But it’s using Ruby ? And I am not familier with it, how difficult it is ? Any Ideas ?
August 10th, 2005 at 7:08 pm
Ruby on Rails is sweet, I suggest you learn about it if you have time. It is not difficult to use at all. Those tricky Japanese.
Anyway, you don’t *have* to use Ruby, just check out the source code and work your way through it, you’ll be fine.
Check out how to do a drop on that same site (script.aculo.us find the documentation) and it shouldn’t be too difficult to do… just create objects that interface with the drop, and call a script on the onDrop event that creates a copy of the dropped element.
August 19th, 2005 at 1:49 pm
Okay, seriously, does anyone know how I can make a sortable group with the script on this page, and then add another element to that sortable group?
August 25th, 2005 at 4:29 am
I like this implementation..
one little detail though: your empty ul.sortable elements don’t pick up list elements.. maybe you should add something like “ul.sortable {min-height: 1em;}” to the css, or else all your listitems will end up in one list.
August 30th, 2005 at 3:37 pm
okay, I still haven’t figured it out. Any hints on how to unregister a draggable? I have:
DragDrop.makeListContainer(eNewSort,’s2′);
and now I have added a child element to eNewSort, so I want to unregister the list container and redo the it. Come on please? Any help?
Ben
August 31st, 2005 at 4:47 am
hi all,
firstly i just like to mention that this script is pretty cool.
anyway what im trying to do with this is extend it so that I can have lists within lists. has anyone out their managed to achieve this?
I think Joris was posted a similar question.
thanks in advance.
so it would look something like this, where i can drag items in and out of innerurl.
Seven
One
Six
One
Two
September 6th, 2005 at 6:00 pm
Yes, JC, I have a script that does that, I’ve been working on several alternatives. Feel free to e-mail me at nefiga@hotmail.com. Now I wish someone would answer my damn question!
September 9th, 2005 at 2:12 pm
Hi,
Great Script, only issue i am facing is how to make drag item to auto scroll browser window.
thanks.
September 13th, 2005 at 2:08 am
nice work. just wondering if you’re going to develop this further.
was hoping you could help me with your codes.
see, i want to add a handle, so that dragging will only happen when i mousedown on a particular place inside the list and prevent dragging when highlighting the text inside. cant seem to find how to integrate tool-man handle with your script
thanks
September 20th, 2005 at 9:15 am
I really like this script!
I am having a little problem, though. First of all I changed my mysql ‘item’ field to text instead of varchar. (Maybe this is where it goes wrong).
The problem I’m experienceing is that list items containing line breaks or br-tags doesn’t get saved to the database for some reason.
If anybody wanna take a whack at this my adress is http://www.twotype.se/dd/dd.php
Cheers.
September 20th, 2005 at 1:50 pm
Never mind! Camino got buggy on me….
October 5th, 2005 at 1:31 pm
I’ve encountered a strange situation (bug? if you will.). When I wrap the lists into their own tables (for formatting purposes) and those tables are in another table (for page layout) the alignment seems to go off on the drag and drop. What’s strange is that it happens on some computers and not others. I’ved tried upgrading to IE 6 and it doesn’t always fix the problem and some IE5 machines work fine. I’m assuming it’s IE’s fault, but was trying to figure out a better work around. The page and lists are heavily dynamic so the use of tables throughout makes it easier to control the look and feel.
Just to make sure it wasn’t something else on the page, I took your above example (View Sourced, Saved) and wrapped each list in a table and then wrapped the page in a table (i.e. nested tables) and it broke as well.
Anyone else encountered this issue? Any ideas on how to overcome it?
Ths.
October 10th, 2005 at 9:56 pm
Like Jeroen Sen I too am interested in making a drag and drop editor for a Content/Document Manager. Here is my first attempt:
http://www.realsimplecms.com/temp/index.html
Ultimately I want the system to look and work the same way in .NET, Java, PHP and ColdFusionMX
http://www.MarkIreland.com.au
October 12th, 2005 at 5:29 pm
Has anyone figured out a way to select multiple items in the first list and drag (and drop) them all at once to the second list?
October 18th, 2005 at 4:51 am
Hello,
I’m trying to set up the drag and drop on a little complex web page, and I come to the following problem : I have put drag and drop list in a relative div, that has a left margin, and on MSIE the drop area becomes active with an offset that is equal to the left margin. So to activate the drop area you have to move the mouse to the right of the area. Of course such behaviour does not append in Firefox or Safari where every thing works perfectly well.
Here is the code that does not work ;
http://www.enseirb.fr/~goudal/tliste/Listes.html
Draging from the left list to one of the right one does not work will on MSIE
November 1st, 2005 at 12:26 pm
I have been playing with this script for a few hours. First off let me say this is a great script. Its a CMS programmers wet dream. There is only a few things that I can see wrong with the script. And by wrong, I mean that in the sence of I deal with stupid people, and confusing them even slightly should be considered a felony.
That being said, let me give you an example of what I see wrong… If you have a column that is 600 px wide, followed by a break and two columns side by side each 300 px, and you have a large amount of text in each of your draggable boxes, like stories in a CMS, and you go from the top (600 px) to the bottom colums, as soon as that block leaves the column, you have to drag the block to the location where the column WAS, not is now. Remember, the story or draggable block that your moving is fairly large. So moving it outside of its parent causes the parent column to resize to a fairly small former self. Then the user has to drag the story to a theoritical location.
The proposed solution would be to not change the size of the parent until the drop has occured. This way the user can see exactly where he/she needs to drag the box too. Now, the draw back to this solution is that if they drag something big into a small area, or any area for that matter, the area will not expand until they drop the item. The only solution for that would be the line with the arrows showing you where the drop will take place. You know what line with arrows that I am talking about?
If you were dragging something between Item 1 and Item 2, it would look like this:
Item 1
>——————–
November 1st, 2005 at 12:28 pm
Whoops. Looks like the comment secion doesnt like less then signs. Okay, well:
Item 1
)——–(
Item 2
Item 3
It should look like that. But with arrows.
Anyways, what I put after that was basically I am trying to get this working today, and if I do, Ill post a link to the code and an example.
But thanks for all your work, the script is very nice.
November 1st, 2005 at 11:03 pm
Greats!!! Wow!!! Yeah!!! With Sajax!!! yeah yeah yeah!!
November 9th, 2005 at 10:38 am
Multi List Drag and Drop - It would be more helpful if you could develop clone and drag items instead of removing from the list?
http://script.aculo.us/demos/shop
this is a neat example i wish it was text and not image.. Any chance of implementing the above example with list boxes?
November 10th, 2005 at 1:06 pm
Is there a way that anyone knows to just remove an element from the stack. I would like to be able to click on a link or something on the element and drop it from the list, but I am having trouble.
Sorry no examples to show.
Great little library by the way.
November 16th, 2005 at 10:15 am
I also have been playing around with the script and I think it is in a very simple way, an excelent script. as the php extension.
But I couldn’t sort a way to implement an handler like in the original script from Tim Taylor, wich in a CMS its preferable due to layer sizes.
Thanks
November 16th, 2005 at 11:59 am
[…] Drop Filed under: DHTML/AJAX, Server Side — admin @ 3:42 pm Misc DHTL stuff Cyber Dummy - Web Developer » Multi List Drag and Drop […]
November 18th, 2005 at 2:58 pm
Has anyone tried to make the li objects copied instead of moved? Can anyone provide direction? Where in the code should that be changed?
November 24th, 2005 at 10:27 pm
Hi Guys
I’m new to this and would just like to have a version of the sajax example with only one list - I have a table with an ‘id’ and ‘iten’ column and I want users simply to be able to drag and drop the items into a new order without a page refresh, but when I remove the refrences to “set1″ and “set2″ from the dd example, the code just breaks. Can anyone give me some tips on accomplishing this based on the dd sajax example?
many thanks
December 12th, 2005 at 11:05 pm
Well done Todd. The script worked seemlessly for me. Very pleased.
Can you give some direction to modifying the script to drag by handle (title bar style), instead of the entire list item?
I’ve been trying to add the BoxHandle functionality in Tim’s example at http://tool-man.org/examples/dragging.html
Line 37 of the dragdrop.js seems to be the key…
DragDrop.makeItemDragable(items[i]);
I’d like to make the first div of the list item the handle.
Your direction is very appreciated.
December 21st, 2005 at 4:07 pm
Use a global to track this
in the window.load function write :
var DragAllowed = false;
then in the onmousedown event of whatever the allowed handle write DragAllowed = true;
add var DragAllowed = false; to any other objects you do not want to allow to get dragged
in the drag.js file find function:
onMouseDown : function(event) {
and wrap the entire code inside with a simple :
if (DragAllowed){
…original code
}
December 27th, 2005 at 10:30 pm
Hi, I’m french.
Thank you for this incredible mod.
I try to use it (to make little cms) but I must drop only one item in each container… (if a container already contain an item, it must not be dropable by a second item).
Is anybody can help me please ?
best regards…
December 29th, 2005 at 11:21 pm
Thanks Sam. I think that’s on the right track, although your solution wouldn’t work.
Even setting the DragAllowed line to “true” in the onload breaks the code when the if(DragAllowed) is put in the onMouseDown function.
ex. in index
window.onload = function() {
var DragAllowed = true;
…
}
and in drag.js
onMouseDown : function(event) {
if (DragAllowed) {
…
}
}
I’d really appreciate your further help though. Please contact me via my site above!
(any thoughts Tom?)
January 3rd, 2006 at 1:10 pm
Hello Team / Everbody,
I need help for Multi List Drag and Drop,
The Multi List Drag and Drop has a functionality that is draggable by taking mouseover on whole “”, what i want is to create a handle for it, i dont want section to be draggable, i want is to set a particular area to drag that complete “”,….
Need this desparatly please help….
Waiting for response….!
Regards
Kapil Kanojia
January 6th, 2006 at 1:02 am
Has anyone been able to do this with one verticle list and one horizontal list?
I’m trying to create editable navigation (left, top, and bottom) where the users can drag and drop between the lists.
I have it working, but the horizontal lists are shakey when you drag items over it, and you can only drag them to the far left place.
Thanks,
Brian
January 6th, 2006 at 5:43 pm
great script, Ive been trying to figure how to tweak it just a little so that when its dragging the window will scroll as necessary.
Any help would be really cool.
- Jim
January 7th, 2006 at 4:32 am
Hi,
I want to limit the number of items that can be dragged into a list. Can anyone think of a good way to set a max number of items a list can hold? Thanks a lot.
Keller
January 8th, 2006 at 5:13 pm
Hello,
i’ve some problems to sort a list in two dimensions, it doesn’t work as in Tim’s example. Has someone found a solution to this ?
January 9th, 2006 at 10:52 pm
Hi,
Great script. Downloaded to play wth it, and of course, ran into a problem. Getting the follwong errors:
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in www\test02\dd.php on line 224
This error occurs for line:
235, 247, 269, 279, and points to:
while($rw = mysql_fetch_array($r))
Any ideas?
Thanks,
Ray
January 17th, 2006 at 9:40 pm
Any chance of getting these two togther ?
http://labs.revision10.com/experiments/dat/dat_example.php
and yours ? that would be awsome!!!!
January 18th, 2006 at 8:42 am
Ghyster…. I think you will need to look at this:
http://tool-man.org/examples/sorting.html
Search on the page for this “Example: Sorting in two dimensions”
January 18th, 2006 at 5:00 pm
Thanks a million man, this is utterly awesome!
Does anyone knows how to constrain the dragging?
I’m not a js kiddie and need some general tips..
I’ve fiddled with the constrainVertial but that did nothing…
Many thanks in advance!
:: Don
January 28th, 2006 at 1:58 am
yaw!!anyone here knows how to make an autoupdate counter..just like in gmail..where the server can be autoupdated instantly and publishing it back to the client??please help..thanks
January 29th, 2006 at 7:14 am
Hello,
I what browsers do the multi list drag and drop work
http://www.cyberdummy.co.uk/test/dd.php
Thank you,
Samir
January 29th, 2006 at 8:17 am
Read back through your old comments and noticed that you removed code for deleting items…any chance you can post it somewhere?
I need to implement a trash can feature in addition to moving between two lists.
Thanks!
February 1st, 2006 at 10:47 pm
Your example is that I wanted but I have a little problem.
I would insert a handle into , how I could do this ?
Thanl you.
February 4th, 2006 at 10:14 am
Great stuff! I have a couple of questions:
Is it possible to use this script with div layers instead of ul/li ?
Also, I’d like to change content of a layer/list when dropped in one specific draggable area?
Thanks in advance!
February 12th, 2006 at 4:29 pm
Hi Tom,
just wanted to use the Sajax-part of your demo dd.php for my app. In my case though, it was important to know, which -Element was being dragged and what drop zone was used. The function OnDrop() in the demo having no params just was too unspecific for me.
So I changed line 227 in dragdrop.js from
this.parentNode.onDragDrop();
to
this.parentNode.onDragDrop(this.id,this.parentNode.id);
Now the first parameter in my client-side event handler tells me the id of the -Element and the second the id of the -Element being used as a drop zone. In the PHP-Part I only have to submit this single operation to the database.
Thanks for your great work!
Markus
February 12th, 2006 at 4:31 pm
oops, spoilt the Tags for {LI} and {UL} in my last post.
Sorry!
February 13th, 2006 at 11:16 am
hey
great script
but im having a problem. im trying to get the items into a table and its not working
is there any chance to use instad of ?
anyone modify that script for that?
February 13th, 2006 at 3:36 pm
another question
how can i modify that script that instad of clicking anywhere in the box its dragging it , to put a icon “click here to drag”
?
anyone has the code modified?
February 18th, 2006 at 11:47 am
Hi!
The Multi List Drag and Drop script is great! And You’re right, that something like this would be cool for CMS layout editor. But is there a possibility of making nested lists (trees)?
February 21st, 2006 at 1:09 pm
Is it possible/easy to do the following: allow items to be dragged from List A to List B, without being removed from List A? I.e., working as a list of possible choices. I’d like the user to be able to drag an item from List A to List B to select it, and drag it out of List B anywhere to deselect it. This is all new stuff to me, so any examples I could find would be a great help. Thanks for the good work!
March 2nd, 2006 at 8:00 pm
i was messing around with this getting it to work with float images.
http://turk-182.com/eMortal/admin/test.html
i got it to work, but the only problem is that the sorting doesnt really work right. try and drag an image in between 2 others and it jumps to the beginning or end of that row. anyone have any ideas on how to make this a little more smooth like here.
http://turk-182.com/eMortal/admin2/testSortable.php
March 9th, 2006 at 1:40 pm
Hiya,
reference to amir’s post, i think an additional support to have a handle (hotspot) for dragging would be great! Any life saviour?
March 15th, 2006 at 9:27 am
hi, am a student and new to web application.When i open checking the user name EXAMPLE in this site in firefox, konqueror & mozilla browser its working fine but when i opened in Internet Elplorer 5 its not working.Its showing the alert message as Could not evaluate .Its fetching the data from the server and displaying in the alert message and not in the screen.Any one can give the solution.
Regards,
March 16th, 2006 at 1:59 am
Guys I love that multy drag and drop you can help m to update xml file with drag drop I have test it with DB need to update xml file can anyone help Thanks
March 17th, 2006 at 10:53 am
Hi,
anyone have the modification to enable a handle (hotspot) for dragging??? Aparently, the author doesnt seems to reply anymore
March 24th, 2006 at 7:11 am
hi, if I put a input text field in the area. I can’t type anything in the textfield int firefox 1.5.01.
The html looks like:
images/google.gif” >
March 25th, 2006 at 4:01 pm
Hi guys,
Excellent program!
I made a little game type thing with it for fun.
http://www.recordcorner.com/_experiments/squares/
One thing I have noticed is that if I put tons of squares, the algorithm because much much slower.
Any way around this to keep it fast?
March 26th, 2006 at 1:52 pm
hi!
i have an issue with multi drag and drop which i cant figure out how to solve it…
the problem is next…
i made an ul id with li inside..
so i can drag those li tags..ok till now..
in every li tag i added a new ul tag with another id and with li tag inside again..
now what happens..
the serialization of the li tags into the first ul take all childnodes and the li tags from the second ul inside…
i tried with some lite barrers like to check the className before serialize them but the getElements ByTagName doesnt recognize the li tag that i drag and drop it????
any help appreciated..
thanx in advance..
March 27th, 2006 at 5:56 pm
I have what I think is a quick, easy question:
How do you keep from highlighting the text on the page while dragging?
event handling, like stopping propagation? i kinda tried that.
Just a tip on where to look for an answer would be really helpful. Thanks a lot.
March 29th, 2006 at 5:06 am
Hi guys,
I need swap table columns on drag and drop.
Please let me know the way.
have a nice day.
jeeva
April 14th, 2006 at 4:48 pm
If you take the original multilist example, http://neb.net/playground/dragdrop/, and you put the second list into the first list (nested), you’re then able to drag the entire second list into various positions of the first list. Individual list items in the second list are no longer draggable though … it’s the whole list or nothing … can anyone make this work? Basically the same as some other people have been asking for … hierarchy, tree view, drag and drop between nested list items, all that good stuff.
Here’s an example that uses XML/XSL, but it only works in IE…
http://www.15seconds.com/issue/020424.htm
Clicking on the demo does not work for some reason, but you can download the code, and open it i IE, and it works really well. I’d much rather have this kind of functionality without the XML/XSL….
April 15th, 2006 at 5:36 am
I have been working on sorting in two dimensions example from Toolman - http://tool-man.org/examples/sorting.html.
In my version, I want to include a checkbox inside the boxes so that a use can choose the option. In all the browsers except Safari, this works fine. The problem in Safari is that the checkboxes aren’t clickable. The cursor stays in the move position. In the other browers I guess the checkbox field overrides the movable aspect of the box and remains clickable.
Does anyone know how to fix this in safari???
I thought about alterating the javascript so that only part of the box is movable, but I don’t really know what to change in the javascript code to do this.
Here is my example:
http://www.recordcorner.com/sorting_test2.php
Thanks!
xenakis
April 22nd, 2006 at 3:21 pm
Great work!!! Must say Thank you!!!
A big improment from the multi list version by Ben Levy.
Just found 1 problem:
When I set the style of the to be float:left; (coz i want the elements in the list to show horizontally), the movement of the element within the same list would go wired.
It will be of greate help if this can be fixed.
April 24th, 2006 at 12:58 am
Could someone tell me if it is possible to put a table in one of the list items and make the table only dragable by its header and not it’s content. Thanks for the help.
April 25th, 2006 at 1:46 pm
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.
April 28th, 2006 at 4:40 am
Hi
Could anyone get me a sample code of how to use Tim’s (tool-man.org) inline editing in our code.
Thank You
May 2nd, 2006 at 11:06 am
Tom, GREAT SCRIPT!!!!!
I am trying to implement it, but wanted to drop the element in the next container without removing from the first container.
I mean clone on drag start.
How to do this?
May 2nd, 2006 at 1:09 pm
Anyone figure out how to make the page scroll when an item is being dragged?
May 2nd, 2006 at 7:29 pm
Did anyone ever have any luck finding out how to get a hotspot (drag handle) working with Tom’s example?
If you have can you please share?
PLEEEEZE
-Tony
May 7th, 2006 at 9:27 pm
Hi, great work. I really need to do this in classic ASP. Do you know if there is an example of such a thing? Many thanks for any guidance you can give me.
Tony
May 12th, 2006 at 3:07 pm
I love this
Will try to test with my CMS …
http://www.vision.to/CMS_BE/Home/
Btw what are conditions of use, license ?
Any donation info ?
May 19th, 2006 at 7:13 am
I’m trying to use this excellent script to customize a page in edit mode. But there are some bugs when you are trying to move an object relative big to a different box. the bugs are following :
- the box do not always take the dimensions of my object, even if your are over it
- Sometimes a bigger box wich is over an over smaller box, will be bigger to welcome my item, and in this case I cannot put it in the smallest box ….
if you don’t really understand my problems, try yourself :
http://dev.sportanddev.org/en/exemple/
does anyone have a good slution to fix this bug ???
Mail : jperriard@floor.ch
SkyPe : floor004
Thanks, Julien
May 19th, 2006 at 5:37 pm
Very Handy!
I would love to see a few extra features added…
If anyone feels up to the follow changes let me know, there might be some cash in it for you!
1) Drag from a “Master List” on the left to a “Playlist” on the right. This would require a copy or clone feature (as so many have requested so far). Items dragged from the left would be added to the list on the right (but would remain in the master list on the left when the submit button is hit. So only the list on the right would be updated). It would also be nice to lock the items in the master list so they can be dragged out of the list but not dragged anywhere else within their own list (however the ability to sort the order of the items in the master list would be nice: by name, id, date etc). The list on the right would be sortable however.
2) Garbage Can - Somewhere to drag items from the Playlist (list on the right) so they are deleted.
3) Clickable Links - Each item would be clickable as well dragable. Ideally the links would come from a column in the database.
4) Add New Item - The ability to type in a text field and hit submit and add the item into the list on the right. This would be perfect for adding Titles for categories for example)
5) Change List on Right - The ability to select from a drop down (or something else) different lists on the right. Each list could be a different table in the database or something?
What I am looking for may be somewhat like the mods Sebastian Moser (see Post #2) has made?
If anyone feels up to the challenge of any or all of these mods please let me know! If you have any questions just email me! I am comfortable with PHP and MYSQL but my javascript/ajax skills are limited.
Thanks, Andy ( junkedout@gmail.com )
May 22nd, 2006 at 8:11 pm
Here’s some code for the window autoscroll.. now where is it supposed to go? I’ve tried numerous places inside of the script without much success.
if (y > (window.innerHeight + window.pageYOffset - 10)) {
window.scrollBy(0,10);
}
if (y
May 25th, 2006 at 12:25 pm
I added support for scrollable DIV, see here:
http://austroweb.at/software/javascript_drag_drop/javascript_drag_drop.htm
May 25th, 2006 at 10:54 pm
Tom,
The link you gave Dipesh (http://kiwi-interactive.com/experiments/inlineEdits/drag.html) regarding the tables and rows swaping no longer exists. Do you have any other reference?
Thanks
Luenib
May 25th, 2006 at 11:02 pm
My point is: what should I do to modify the code in dragdrop.js so I can work with tables and rows instead of ul’s and li’s?
Thanks again
Luenib
May 26th, 2006 at 4:55 pm
Hey,
I’m making a online file managing system where I use this, but is anyone able to get it so, that if they move one element from one list to an other, it just updates that element.
So it just calls like a page: update.php?elementid=Seven&list=center
and then I can just update that one?
I can pay for this if this can be done.
mail me @:
seba.kerckhof@gmail.com
I have also made something that dynamicly makes new lists (in ajax) but, it also has to add something in the tags that initialate the list, but I can’t get it to work, if anybody can do this (I can pay for it) also mail me.
May 26th, 2006 at 6:45 pm
Hi Emile,
Thanks for trying to add the scolling. I tried it out, but actually it did not work in (in i.e.6.0). It did work on your page if you want to move an item from one column to the other, but not if you work with only one column.
Funny thing is that if you want to take an item down within the same column, and you reach the end of the window, intuitively you use the scroll wheel of the mouse, and the window moves down. But when you then continue dragging the item down, the pointer will move down, taking distance from the item, but the item won’t move further.
How to solve this?
May 29th, 2006 at 8:06 pm
Page autoscroll, asked for by Chad Saunders (#105): see my example, which is working in Safari and Firefox. Please test in IE 6.
By the way: 10px is way too fast! I took only 2px
May 30th, 2006 at 7:40 am
Surprise: my example is not working in IE 6.
I assumed Tom’s script was based on Toolman’s (Tim Taylor) original code, which includes some lines for scroll support. Maybe Tom’s script was based on an earlier version, or maybe he left out some things, I don’t know…
Both pages (Tim’s and Tom’s) were not updated for a long time, apparently they don’t have time or interest anymore. We could use a combination of both versions.
May 31st, 2006 at 3:06 pm
There is a bug in the script. When you drag out of any of the containers, and let the item bounce back to the end of the original one, it doesn’t clean up after itself. It leaves ul elements laying around. Every time you do that it creates a new one. Typically it doesn’t matter, but due to a quirk in my CSS, they showed up. The fix is to add the code:
var tmpContainer = this.parentNode;
tmpContainer.parentNode.removeChild(tmpContainer);
Into onDragEnd, right after the while(container!=null) block. (not inside that, after). That cleans up the orphan elements.
You can see these elements if you have firefox and the firebug extension. Just inspect the DOM, and close/open the body tag to refresh it.
Hope that helps somebody.
June 7th, 2006 at 12:23 pm
This tool is great! I love using it! Simple, elegant, effective…
I think the bounceback feature may be causing problems with updating the database - I can’t get the items to be updated properly in the second example when I drag them out of the area.
Also, I’d like to use a trash can feature in my projects… is there a way to get the code for that?
Thanks!
June 7th, 2006 at 12:35 pm
Maybe I should clarify -
When I drag an item out of one of the lists and it bounces back, it appears to be at the bottom of the list. In the database, however, the item retains its previous position (”order” field).
Thanks!
June 10th, 2006 at 5:14 pm
I was able to get the cloning to work so that you can drag from one list and the item does not get removed, but instead duplicates into the second list. I think it works as intended.
http://71.79.237.113/hosting/dragdrop.html
June 19th, 2006 at 8:06 pm
So, I know I’m kind of an idiot, but I’m needing some help with this script :(.
I’ve got it pulling information from my db into one list. I’ve changed it so that there’s not an order table in the database, but just added an “order” field onto the table I’m pulling from.
I’m setting up a newsletter system so the database already contains “article_id” and “issue_id” columns, along with the “order” column I added.
I would like to use the ajax method, so I need to know what I don’t need to keep ahold of (as far as code) and then how to go about altering the sql queries :(.
I know I’m asking a lot, but like I said, I’m an idiot. I’ve been working on this all day and I’m just now getting it to pull my records correctly.
If anyone could help me out, that’d be great. If you want to see an example or whatever, here’s the actual page I’m working on:
http://www.fhsu.edu/willp/ajax/dd/dd.php
Thanks for all your help,
Will
June 19th, 2006 at 10:44 pm
Hi,
i tried to improve the code, to make it a bit more oop
http://peter-rehm.de/2006/06/20/multi-list-drag-drop-sajax/
Sorry the Page is in german, but anyway you can download the Files there and have a look. Also an Example Page is given, but you need to watch the code.
It is working in FF, Safari, IE6, i couldnt find any errors…
June 20th, 2006 at 3:44 pm
Hello! How I can combine functionality of multi list dnd, dnd shopping cart and Tim Taylor’s lists dnd. I want to use it in my CMS. You can see example of my work with this scripts ported to xajax there: http://execms.jino-net.ru/ ; login: admin, pass: 1; http://execms.jino-net.ru/?act=admin&mname=exe_menus&a=menu_edit&id=2
Thanks to all!
June 23rd, 2006 at 10:13 am
After rest I observed sortable function in this script and made menu editor. But I also need to know hot to create handlers, I tried but failed. http://execms.jino-net.ru/?act=admin&mname=exe_menus&a=menu_edit&id=2
login: admin, pass: 939
June 29th, 2006 at 1:09 pm
Great Work Tom,
you saved my job
To make items draggable by handle
Title
other content
in dragdrop.js
change
item.setDragHandle(item);
to
item.setDragHandle(item.childNodes[0]);
I couldnt figure out without making this change.
Cheers & Thanks
Shuja
July 18th, 2006 at 1:01 pm
Hi - I wandered if anyone new how to get around a problem I’ve encountered?
I have two lists, the first list is pretty long, and around 50-60 items, and the second list start empty.
When I scroll down the page to the bottom of the first list and attempt to drag an item from the bottom to the top of the second list there is a necessity to scroll the page back up, but this is where the problem occurs. When I scroll up - whilst dragging the item - the item stays in it’s original position prior to scrolling, so in effect it gets left behind and I can’t add the item to the second list.
I hope you know what I’m getting at?
July 24th, 2006 at 1:18 pm
Hi!
I tried to make all the functionality without a database and php, using only cookies and javascript. After rebulding the boxes with DOM, the drag and drop feature doesn’t work.
http://kampany.vnubp.hu/dnd/dd.htm
If anyone could help me out, that’d be great.
July 24th, 2006 at 2:10 pm
It works now
July 25th, 2006 at 7:14 pm
hello,
this is just awesome. I’ve been looking at similar solutions, and keep hitting the same wall with them. But yours looks most promising for what i need, but i’m still a tad unsure. I want to be able to submit the order to a separate (or the same) database for a poll. where 1 person could rank things 1,2, 3, 4, and 5. then another would rank things 3,2,1,5,4… etc…
is this at all possible?
July 31st, 2006 at 6:42 am
Hi Tom,
I have tried your code and it’s a great piece of work. I was trying to customize it according to my specifications. I would appreciate if you help me to make it work.
1. Is it possible if I don’t want to drag any particular element from a list?
2. I dragged an item from first list to second list. Now what I want is when I dragged that item outside of any container, instead of returning to second list it should return to the first list.
I am working on above two problems. I would appreciate if somebody helps me in this regard.
Best Regards,
Inderpal Singh
August 2nd, 2006 at 1:18 am
Shuja,
I’m using the original code provided by the author and cannot find the following line:
item.setDragHandle(item);
How does one get the hot spot / handle working?
It would be a great help
David
August 2nd, 2006 at 6:04 am
Hi All,
The script is working great. I was working on to make the copy/clone of item while dragging from one of the list.
Wes, I think you have achived the same. The URL given by you is also not accessible. I would appreciate if you give me any pointers/directions to make it work.
Thanks in advance!!
Best Regards,
Inderpal Singh
August 9th, 2006 at 10:00 am
Doh… some of the links to the modifications made to this script have vanished. I really could do with a valid link to a version of this script that…
1] does the clone drag and drop between lists
2] Really nice if the lists could be nested and the clone contained whatever is nested inside the original element
3] Included the edit functionality so that cloned elements can be renamed
4] Allowed the lists to be collapsable (cross browser)
Basically what I’m trying to do is have a fixed, nested list on the left and allow the user to drag cloned fron this master list into an empty list on the right. They should then be able to rename the list elements by clicking on them.
If any one has any live links to version of this script that accomplish at least the cloning it would be appreciated.
August 11th, 2006 at 9:21 am
Great work! - Now all works fine in my new configurator…
Thanks to all!
Maik
August 14th, 2006 at 10:16 am
>>> I was able to get the cloning to work so that you can drag from one list and the item does not get removed, but instead duplicates into the second list. I think it works as intended.
http://71.79.237.113/hosting/dragdrop.html
August 14th, 2006 at 10:16 am
Hi Wes, could you please post the example. The link is not working.
August 14th, 2006 at 8:28 pm
If you go to http://71.79.237.113
it lists an email - it doesn’t say Wes though.
maybe email him and post the answer.
August 17th, 2006 at 6:19 am
Hi Sriram,
I think URL is not accessible. Could you please post it again?
Best Regards,
Inderpal Singh
August 21st, 2006 at 4:34 pm
Hi guys I need your help! I want to build an request form on the intranet with voucher generator which has full control on all in & out data inquiries and is connected to a database built in a way that data can be extracted and retrieved easily.
I work in the archive unit and we have our vault where I from prepare requests to other personnel’s.
Requires:
A request form full with the most form fields, text , drop list , text field , radio, check box, …etc
On submit the form will be sent as Email to the archive unit with all the required information’s.
The archive clerk will open that request and prepare it for pick up.
Once every thing is ready to go, the archive clerk will need to generate a voucher for signature by the requester, and simultaneously by clicking on print voucher it will extract data from the data base.
On the other hand, when materials are back from users, there will be a receipt voucher waiting for them, and simultaneously by clicking on print voucher it will retrieve data back to the data base.
IS THAT EASY TO BUILD? AND HOW!
NOTE:
The database at the beginning will be build manually as the request will be received by Email.
August 21st, 2006 at 8:34 pm
http://71.79.237.113/hosting/dragdrop_new.html
August 23rd, 2006 at 5:07 pm
Anyone have a solution for the handle part of this yet? This seems to me to be a very important option to have.
David
August 23rd, 2006 at 8:40 pm
Love it - still looking at a bug…
The items don’t update properly in the database if you use the bounceback feature. Anyone have a fix?
Also - I’m looking to implement a “garbage disposal”. I want to be able to delete items from the list (possibly by just dragging them out of the list area). Does anyone have the OLD code (that incudes this functionality)?
Thanks!
August 28th, 2006 at 8:45 am
Hi All,
So here is the last and working url.
http://www.hirstand.hu
You can reorder the boxes and all stored in cookies.
August 28th, 2006 at 7:51 pm
Hi all,
this is a great script!!! Congratulations!
I made a workaround to get clonning to work to, here it is:
1) Save the fixed UL content:
var list = document.getElementById(”source”);
var savedValues = list.innerHTML;
2)Everytime the users drop it reloads the saved content:
function onDrop2() {
var list = document.getElementById(”source”);
list.innerHTML = savedValues;
window.onload();
var data = DragDrop.serData(’g1′);
alert(data);
}
..
..
window.onload = function() {
var list = document.getElementById(”source”);
DragDrop.makeListContainer( list, ‘g1′ );
list.onDragOver = function() { this.style[”background”] = “#EEF”; };
list.onDragOut = function() {this.style[”background”] = “none”; };
list.onDragDrop = function() {onDrop2(); };
…
.
.
.
September 5th, 2006 at 1:06 pm
Hello,
is there a version to save positions with cookies ?
Thanks a lot
September 8th, 2006 at 4:44 pm
love the script. i was able to make it work with JSMX and all, but this version of the script has an awful time dealing with 2-dimensional lists. please… if anyone has corrected the script to function correctly in 2-dimensions, let me know. it’s unfortunate to be limited to an up-down only single-file list that stretches beyond the browser and doesn’t scroll properly. i even looked at yahoo’s yui library for ideas to help the drag and drop, but that’s all a big mess.
September 13th, 2006 at 6:21 am
I have to lists so user can drap between, to start with on list is empty and i would like to have the empty to have a min height so it is easier to drag o the empry list, I don’t know if this can be done, if it can be you some help of how to set this up
September 13th, 2006 at 10:38 pm
I updated the class for the AJAX lists. Now its more flexible. E.g. you can easily ass more than 3 sections for managing elements. only give the name of the columns while calling the class. Some more small things added to make the code more pretty and to improve the handling.
Maybe its useful…
Link to the blog entry (german) http://peter-rehm.de/2006/09/01/multi-list-drag-drop-part-2/
Link to the Demopage + Download (english): http://peter-rehm.de/downloads/sajax/demo.php
Have fun!
September 17th, 2006 at 10:20 pm
Hi All,
I’m developing a site in PHP/MySql that requires Ajax for this feature
: The user read an article and if ever he likes it he can drag it and
drop it into his “basket”. Then when he’ll consult its account he’ll
found that article. I think it’s easy to do but I’m a beginner and I
didn’t found any help. Please help.
Thanks.
September 20th, 2006 at 7:52 pm
how could i make the list items divs? insted of li tags.
September 28th, 2006 at 5:34 pm
To start, I have extensive background in php and html, but very little in javascript. Here are a few ideas for you javascript gurus out there:
This is by far the best drap and drop. It is much better than script.aculo.us. I have done tons and tons of looking, and this is the best.
The only real bug (IE and Firefox) is that whenever you drag a to another box and enter the box slowly, there is a weird twitch. There is also a twitch at the the bottom of lists more frequently. Lastly, an empty container in Firefox is really small.
Animations would make this script really sweet. Maybe have an animation for the bounce-back and possibly the shuffling in the containers. Maybe use script.aculo.us?
Furthermore, I have need to constrain one or two elements to a list but allow other elements to be added and removed from the same list. Also, the constrained elements would have to be sortable in the list that they’re contrained to. I was thinking something like a vertical constraint or something? Let me know if you have any ideas.
Thanks!
September 29th, 2006 at 6:28 am
Hi Francisco,
You have done a great job. Could you please post your complete code for cloning?
Best Regards,
Inderpal Singh
October 4th, 2006 at 7:04 pm
I’am Argentinian, sorry for my bad english!!! first, your examples 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
October 6th, 2006 at 12:39 pm
Hi Tom
Like your script, but is it possible to use div tags instead of list?
I also would like to use the script with two table in a join sql.
Is this posible?
October 11th, 2006 at 8:01 am
Hi,
please help me out in altering above script to leave a copy of it in source div like shopping cart.
Thanks In Advance..
October 12th, 2006 at 3:58 pm
This is an incredible script, truly the best I have found. I was wondering if anyone had experimented with limiting the motion of certain tags. For example, I want two tags to stay in one list, but I want them to be able to be sortable with the rest of that list. I want to contrain these two tags to one list and keep them from even exiting the list. Let me know if you have any ideas.
October 17th, 2006 at 4:10 am
Sam (Post #59) was close with the handler idea but there were a few errors.
1) Put the DragAllowed = false; line BEFORE the line: function confirm(z)
2) You also need to put DragAllowed = false; just before the line return false; in the onMouseDown : function(event) { of drag.js
Also, you can’t have the “AllowDrag=true” in the mousedown event of the LI object, it has to be lements inside that.
Seems to be a lot of people asking for this. Hope it helps.
October 25th, 2006 at 5:02 pm
It is good but some one can help me in such script in which i can drag and drop a compplete row populated with DB contents and also one complete column and also a single item.
November 6th, 2006 at 4:08 pm
How i add more elements, after load the list.
makeListContainer : function(list, group) {
if (this.firstContainer == null) {
this.firstContainer = this.lastContainer = list;
list.previousContainer = null;
list.nextContainer = null;
} else {
list.previousContainer = this.lastContainer;
list.nextContainer = null;
this.lastContainer.nextContainer = list;
this.lastContainer = list;
}
list.onDragOver = new Function();
list.onDragOut = new Function();
list.onDragDrop = new Function();
list.group = group;
var items = list.getElementsByTagName( “li” );
for (var i = 0; i
November 10th, 2006 at 2:47 pm
To add a handle :
Edit dragdrop.js
line 83 :
makeItemDragable : function(item) {
Drag.makeDraggable(item);
item.setDragThreshold(5);
item.setDragHandle(item.childNodes[1]);// ADD THIS
// tracks if the item is currently outside all containers
item.isOutside = false;
item.onDragStart = DragDrop.onDragStart;
item.onDrag = DragDrop.onDrag;
item.onDragEnd = DragDrop.onDragEnd;
},
November 15th, 2006 at 4:40 pm
I have implemented the cloning basically off Francisco’s idea. As the item leaves its original container, we clone it, and append it to the parentNode. On DragEnd, if we are back in our original container, we simply destroy the clone object which was originally created (the user may have wanted to reposition within the same list).
A welcome side effect of this if you drag an item outside all containers, and let go off the mouse, the item is sitting right where the item originally was. At that point, my modification to the script simply throws the original node away and leaves the clone in the original container.
The only modifications are to the DragDrop.js file, but I have included the other two script files (coordinate.js and drag.js )for completeness sake.
One further thing, I have left it up to the developer to tweak to their needs (there is nothing preventing the user to clone between two lists for example, you can stop that behavior by simply not attaching the dragLeave event to items in the list you wish not to be cloned).
Here’s the links:
http://www.beyerphotography.com/drag.zip
(or if you can’t decompress WinZip files, just swap the contents of the dragdrop.js file included in this blogs downloads with the text from the below link and save the file.) http://www.beyerphotography.com/dragdrop.txt
November 23rd, 2006 at 10:22 pm
Drag & drop is very util.
I have same problem that item 29.
I use overflow: scroll and height in ul boxy (css) but I dont drag & drop item down.
I dont know how solution. Can you help me please??
Thank for your atention.
Regards.
November 28th, 2006 at 10:56 am
Hi, anyone with working cloning code?? Please!!!
TIA
November 28th, 2006 at 3:13 pm
Ive added one thing i think its quite useful,
If for example you want to be able to move elements form list X to list Z but block from Z to X.
example:
DragDrop.makeListContainer( list, 'g1', true );
// true - list.allowdragto = true
To Change:
list.group = group; //under this add :
list.allowdragto = allow;
Then look for this “container.group == parent_group”
and change it everywhere to
“container.group == parent_group && container.allowdragto == true”
November 30th, 2006 at 12:15 pm
Can anyone get this working with the mysqli extension, rather than mysql? For the life of me I just can’t do it. It loads fine but just can’t parse the data. It doesn’t seem to handle the update_db function.
December 4th, 2006 at 4:33 pm
I haven’t read through any of the previous 148 posts, so forgive me if this has already been discussed.
http://216.253.95.34:20001/list.gif
In CMS Made Simple, there is a feature to sort the order of your navigation, with lists inside of lists, all sortable. While being able to move one list item to a completely different list would be nice, the implementation that is set in CMS Made Simple is sufficient to get the job done. However, going through their code was a headache. I tried to accomplish this with your modified version, without success.
Basically, the first listed items are sortable between each other. The second tier items are sortable between each other, and so on and so forth with a third tier. Would you be able to update the script to allow for this? Currently, any additional tier lists, when clicked on, are behaving as if you clicked on the parent list.
Make sense?
December 15th, 2006 at 12:29 pm
Hi,
Can any one tell me how in existiing drag & drop script auto scrolling of browser window can be done when drag element reaches top or bottom of screen window.
THX in advance for any help on this auto scroll thing.
Cheers !!!
December 28th, 2006 at 10:00 pm
In reply to Post #87 (Jason),
I found a simple solution to this problem. You can solve the Firefox bug by adding an event to the INPUT tag…
{input onmousedown=”this.focus()” ……. }
I have v2.0 installed, so I wasn’t able to test it on 1.5x, but I expereinced the same problem you described so I assume this might fix the issue on any recent version…
Sorry it’s almost a year later…
January 3rd, 2007 at 4:45 am
Here is a simple web page, that allows the user to select any of the cells in the bottommost row and place the cursor on any on the top rows. the selected charatcer appears in the designated cell. But I want to make it user-friendly, drag and drop feel.
%@ Language=VBScript %>
function fn_place(name)
{
//alert(name);
document.getElementById (name).value=document.getElementById (”hidden_text”).value
//alert(document.getElementById (”hidden_text”).value);
document.getElementById(name).style.color = “red”
}
function fn_set(val)
{
document.getElementById (”hidden_text”).value=document.getElementById (val).value
//var tmp=document.getElementById (”hidden_text”).value
//if(document.getElementById (tmp).value==”")
// document.getElementById (tmp).value=val
//else
//alert(”Cannot be replaced….choose another cell”);
}
function fn_score()
{
var tmp=”";
var word = new Array();
var idx=0;
for(i=1;i
col” size=”2″ onclick=”fn_place(’rowcol’)” readonly>
” value=”" size=”2″ onclick=”fn_set(’btn’)” readonly>
“” then
words=Request.Form (”hidden_words”)
‘Response.Write words
arr_words=split(words,”;”)
mark=0
for i=lbound(arr_words) to ubound(arr_words)
Set fs=Server.CreateObject(”Scripting.FileSystemObject”)
Set f=fs.OpenTextFile(Server.MapPath(”dict_words.txt”), 1)
do while f.AtEndOfStream = false
‘if lcase(trim(arr_words(i)))=lcase(trim(f.ReadLine)) then
if strcomp(lcase(trim(arr_words(i))),lcase(trim(f.ReadLine)),1)=0 then
‘Response.Write(arr_words(i))
mark=(mark*1)+(1*1)
%>
“)
end if
loop
f.Close
Set f=Nothing
Set fs=Nothing
next
Response.Write (”Score = “&mark )
%>
January 5th, 2007 at 3:02 pm
I’m trying to have a nested list, where I can drag any li to another place in the list. I have found some scripts that can partially do this, like a widget for the YAHOO Library, but the problem is, as soon you drag the last item from a sublist you cannot add any child elements again. I had the idea to add a dummy element when this happens and remove it as soon a real item gets dropped on it. But making the dynamically added dummy element a droppable is a pain in the a**. Beside of that I’m not a huge fan of the YAHOO Libraries. So if any of you have a better and/or easier way to do what I want to achieve, i would be very grateful.
Example:
Logos
RGB
Grayscale
Pantone
Fonts
Stylesheets
RGB have to be moveable to the first level like “Logos”; “Fonts” and “Stylesheets” but also as a child of “Fonts” or “Stylesheets” or even as a dhild of “Grayscale” or “Pantone”.
January 5th, 2007 at 3:03 pm
“RGB”, “Grayscale” and “Pantone” were meant to be child elements of “Logos”…
January 7th, 2007 at 1:40 pm
Can i load a page into the boxes i move around?
January 8th, 2007 at 5:32 pm
I had a problem where I had a small width left hand column and a larger width right hand column and found that because it checks the whole div has done a dragout from the source list you couldn’t move into the left hand destination list.
The solution I found was the following:
In dragdrop.js within the onDrag function
Change:
if ((nwOffset.inside( container.northwest, container.southeast ) || seOffset.inside( container.northwest, container.southeast )) && container.group == parent_group) {To:
if ((nwOffset.inside( container.northwest, container.southeast )) && container.group == parent_group) {And:
} else if (!(nwOffset.inside( this.parentNode.northwest, this.parentNode.southeast ) ||seOffset.inside( this.parentNode.northwest, this.parentNode.southeast ))) {
To:
} else if (!(nwOffset.inside( this.parentNode.northwest, this.parentNode.southeast ))) {This (I believe) means it’s just checking the top-right corner for position rather than the whole div.
Hope this helps someone - well done Tom
January 19th, 2007 at 8:16 am
Hi,
Is this possible and how to do it:
I want to add an icon/gif in each draggable object. When pressing this icon, the text (One, two etc) in that object will be editable. So then I can change Seven to Treehouse or something. After hitting enter, or clicking the icon again will make the text un-editable again.
When pressing the submit button will update the order AND the text in the db….
This way I can edit the text easily!
January 23rd, 2007 at 9:28 am
very nice code here, it works weel, thanks!
January 31st, 2007 at 2:06 pm
hello
can you help me please ?
actually, i’am using your drag and drop source into my web site but i need it to work differently than the way it used to i mean i would like that the element will be dropped once the mouse pointer touch the zone on witch the element had to be dropped.
February 2nd, 2007 at 3:39 pm
For those of you who are having problems with an empty list being too small to add too, here is a CSS fix that works cross browser to designate a minimum height. Change the px to whatever height you choose.
If the elements are larger than the minimum it will automatically stretch.
ul {
min-height:160px;
height:auto !important;
height:160px;
}
February 2nd, 2007 at 3:46 pm
In post #149 a user seems to have solved the problem with overflow:auto and overflow:scroll in IE. This is his link.
http://www.fad.com.ar/drag.html
Unfortunately, I don’t have any clue how he managed to do it. Does anyone have any instructions on how to pull off a modification to the script that will complete this feature?
February 11th, 2007 at 8:08 am
Hi,
I dont found the scripts of the your first post.
February 23rd, 2007 at 3:30 pm
in the update_db function, change the foreach section to the following. In a long list, then instead of an sql query for each item to update, you end up with just 2 sql querys. Massive speed increase. I brought a page from over a minute down to 2 secs.
foreach($data_array AS $set => $items)
{
$i = 0;
foreach($items AS $item)
{
$item = mysql_escape_string($item);
$set = mysql_escape_string($set);
$casequery1 .= ” WHEN item = ‘$item’ THEN $i “;
$casequery2 .= ” WHEN item = ‘$item’ THEN $set “;
$i ++;
}
mysql_query(”UPDATE layout SET order = CASE $casequery1 END $col_check”);
mysql_query(”UPDATE layout SET set = CASE $casequery2 END $col_check”);
}
March 1st, 2007 at 7:22 pm
Hi there,
I am interested in having a specialized version of your multilist. Please contact me.
Best regards,
Eduard
March 2nd, 2007 at 5:50 pm
Hey Tom, Very cool script. How would I add an add and delete option to it where I could enter a name in a text box, hit a button and it would be added? Also how could I just drag an item from the list and it would be deleted? Thanks, Aaron
March 5th, 2007 at 11:20 am
Great Script.
I am trying to make nested draggable lists. does anybody know how to do it.
Thank you
March 6th, 2007 at 8:37 pm
Hi to all,
it’s a great script. But i have a problem:
I don’t have a list but a “table” with 5 elements per row.
If i want drag element5 between 2 and 3 it’s not work.
I have found a script to do it but i can’t drag elements between two list.
Have you a patch? i am a php programmer, not js!
thanx a lot!
March 8th, 2007 at 7:34 am
Cool script.
I know zip about Ajax and PHP so i downloaded the example and tried to set it up on my site to see if i could get it to work.
It doesnt =/
I’ve defiened db, user and pw but nothing happens.
Do i have to install anything to get it to work? Im such a nuub a MySQL and PHP.
March 8th, 2007 at 11:58 am
Hi,
greatful!!
I use the li-Containers and it work fine, but I’ve one problem:
If i use container in Tag, the frame-line doesn’t go around the div object. Is there any Solution for it?
Thanks
achim appel
March 8th, 2007 at 7:40 pm
Hi Tom, Awesome stuff! In your sajax example source code I’ve modified the echo line below and added some CSS. But when I drag the item from sajax2 to sajax1, and then refresh the page, the values in the text box are still in the sajax2 list even though the item itself is gone. How do I get rid of the values in the text box as well when dragging from one list to the other? Thanks, Aaron
$rw[item]”;
}
?>
The style
input {
position:absolute;
top:0;
right:0;
height:18;
width:30px;
}
March 8th, 2007 at 7:42 pm
Whoops the php didn’t come out, I’ll try again here.
$rw[item]”;
}
?>
March 16th, 2007 at 5:27 pm
Thanks for this. Very useful stuff!
March 20th, 2007 at 6:07 pm
re: #76 - Thank you Marcus! This has made my page a whole lot faster (only updating the item that needs to be updated, and only do an update if the item actually moved).
April 2nd, 2007 at 5:50 pm
The only thing missing from your excellent demo is to add a handle to each container and make the groups sorted.
April 4th, 2007 at 5:01 am
So my question is: can this library reproduce the behavior found here:
http://www.gregphoto.net/sortable/advanced/
That is, sortable items within sortable groups containers WITH handles? I suspect this example could be modified to do so. I’m willing to take a stab at it, but I thought it would be worth asking if someone has already tried it.
April 11th, 2007 at 1:42 am
Really like your PHP adapation of the drag and drop shopping cart. I have a project running currently. If you have any time for some side projects, please contact me as I would be interested in paying you to do some contract work.
Best,
Christian A. Coryell
President/CEO Atwood Marketing Group
May 7th, 2007 at 11:05 pm
Lizardware CMS as of beta 3 now uses this for its menu managment
Also as of the next version your gmail username checker is also going to be used
May 9th, 2007 at 2:25 pm
…are the scripts off?
May 13th, 2007 at 7:54 pm
Nice work
May 23rd, 2007 at 8:16 pm
Amazing script, but I am having issues with scrolling. has anyone found a solution for it yet. When I scroll down and then drag, as soon as the LI leaves the container it repositions itself on the screen.
May 30th, 2007 at 7:37 pm
Hi
I need select