streamofconsciousness » Version 0.2 of ToolMan DHTML Released

Version 0.2 of ToolMan DHTML Released

Posted by Tim Taylor on April 27th 2005 to DHTML & CSS

A new version, version 0.2, of the ToolMan DHTML Library has been released. You can try out the examples (Drag & Drop Sorting, Edit in Place) and download it here.

Here are the Top 5 Reasons to be Excited about Version 0.2:

IE support. Most examples have been verified to work properly in IE6.
Rewritten from scratch; designed for reuse. The new library is more modular, better packaged, and less likely to have name collisions with your code and other 3rd party libraries.
It’s free! Permission granted for personal and commercial use via the liberal MIT license.
Improved quality. Cleaner, less duplicated code. Where possible, library modules have unit tests written using Selenium.
This is only version 0.2. It just gets better from here.

141 Responses to “Version 0.2 of ToolMan DHTML Released”

ori102281

April 27th, 2005 | 11:53 am

it seems to me that this version is significantly slower when handling large lists (250+ items) than the last version. anybody else using this code on large lists?
ameketa

May 6th, 2005 | 1:11 pm

First of all, thank you for your work. This library is fantastic.

I’ve been experimenting with the combination of drag/drop lists and edit-in-place content, and the only problem I have is not being able to register further drag handlers from the API. This is because _dragsortFactory.makeListSortable() does not keep any references alive to the group object it creates. Would it make sense to attach the group object to the list items themselves before exiting? I’m imagining something like:

item.dragSort = dragSort;

inserted into dragsort.js, after line 40. This would allow you to add additional handlers from within the helper functions you can pass makeListSortable.

If I’m missing something, and there are alternative ways to add handlers, please let me know. And thanks again.
Tim Taylor

May 7th, 2005 | 9:00 am
Ori,

I’ve been taking a short break from my DHTML library, but will resume working on it soon. This most recent release focused on IE support, refactoring the API to be cleaner and more easily reused. I will take a look at performance this next go round. If you have the time and inclination, it would really help out if you could post some more context e.g. browser and browser version, OS, and computer hardware. Also, your list of 250+ items, what are the approximate dimensions of these items? Is this a vertical, horizontal, or floated/wrapped list?

Ameketa,

Good suggestion. As a workaround, the drag library does keep a reference to the group in the element that is the drag handle. From drag.js:
```
setHandle : function(handle) {
    var events = ToolMan.events()

    handle.toolManDragGroup = this
    // ...
}
```
By default, sortable list items are their own handle, so in effect you have what you are looking for if you don’t set the handle. Otherwise, you can find the draggroup if you get ahold of the handle element.

It makes sense for both the group element and the handle element to always have references to their drag group. I’ll make it so.
heibao

May 10th, 2005 | 9:09 am

hey, i’m french so i apologize for my bad english…

i’ve tried to use your fantastic drag & drop librairy, which works very good, but i’d like to use it to reorder a list generated from a database. i just want to know when (after which function) have i to call my page who save the new order in the database ? (i don’t want to call it each time the “li” element is touch by the mouse, just after a drag & drop, because the “li” element contains a few links which can be pressed without any drag & drop)

can you help me please ?
Tim Taylor

May 10th, 2005 | 3:10 pm
Heibao,

The drag library allows you to add listeners for drag events:
```
// ...
group.register('dragstart', myFunc)

function myFunc(dragEvent) {
    // ...
}
```
There are 4 types of drag events you can listen for:
- draginit - this occurs on mousedown
- dragstart - this occurs right before the item starts moving and occurs only once
- dragmove - after a dragstart has occured, this occurs for every mousemove event until a dragend occurs
- dragend - this occurs on mouseup
When an item is clicked, at a minimum draginit and dragend will fire. If you move the mouse after a mousedown then dragstart will fire a single time followed by dragmove firing for for every mousemove event. However, if you specify a drag threshold then dragstart and dragmove won’t fire until the threshold has been reached. For instance, group.setThreshhold(5) creates a threshold of 5 pixels; after a mousedown the mouse must be moved a distance of 5 before the item will begin to move and a ‘dragstart’ is fired.

Given this information, I recommend the following:
1. specify a drag threshold
2. register dragstart listener function on the drag group
3. register a dragend listener function on the drag group
Option 1: In the dragstart listener, set a flag indicating that dragging has really begun. In the dragend listener, store the list to the database if the flag has been set and reset the flag.

Option 2: In the dragstart listener, save the current order of the list. In the dragend listener, get the new order of the list and if different store the list to the database.
astrobot

May 13th, 2005 | 6:34 pm

Hi, first off, let me say that your library is absolutely awesome. I’m using it for a few different things right now but what I’d like to know is if there’s a way to “un-drag” an element, that is, to turn off the ability to drag it. This ability would be most appreciated, and keep up the good work.
Tim Taylor

May 15th, 2005 | 1:33 pm
Astrobot,

There’s nothing explicit in the library to turn off dragging on an element. I’ll add that to my list of TODOs. In the meantime, you can try this workaround:
```
ToolMan.events().unregister(group.handle, 'mousedown', group._dragInit)
```
To make it draggable once again you could either call register(...) directly or call group.setHandle(group.handle) whichever you prefer.
astrobot

May 15th, 2005 | 10:42 pm

Thanks! Just what I needed!
kevin

May 18th, 2005 | 8:18 pm

first of all: awesome work!!!

i just played a bit with your script, but what i really miss, is the ability to work with nested lists. it would be fantastic, if it is possible to move an item to a child list of a child list or the other way up. of course, it should not be possible to move a complete list to one of its children, instead move the whole sub-list at once.

any tips to accomplish this?
Tim Taylor

May 18th, 2005 | 9:55 pm

Kevin, thank you for the compliment. Currently the library doesn’t support sorting of nested lists. Along with dragging between separate lists it is a feature I intend to add. Sorry, no ETA on that, though.

If you want to get your hands dirty, you could try building upon Ben Levy’s example of dragging between two lists which he built off of version 0.1 of my library.
makoomba

May 19th, 2005 | 9:30 am
nice piece of code, exactly what i was looking for. So, straight to the point: i had some nasty errors trying to integrate sortable list in my web application, just try to add this simple code to see what happens:
```
Array.prototype.hello = function() {
    alert("hello");
};
```
i’m not a javascript programmer, however, after some “alert debugging” i found where the problem was; in drag.js there are 2 loops:
```
for (i in group._transforms) ....
for (i in listeners) ....
```
just changing this in
```
for (var i=0;i
```
makoomba

May 19th, 2005 | 9:35 am
sorry, but the previous post is messed up … just changing this in
```
for (var i=0;i &lt; group._transforms.length;i++) ....
for (var i=0;i &lt; listeners.length;i++) ....
```
solved the problem. many thanks for your code (it saved me a lot of time) and please forgive my poor english.
Felix Gnass

May 23rd, 2005 | 4:26 am

First of all, nice work! In Firefox (at least under Linux) the “always editable” example doesn’t work anymore, because the input elements don’t get focused when clicked. This is caused by the the mousedown handler in drag.js line 72. Removing the line fixes the problem.

Another thing I noticed is the reference to a global variable called dragsort in dragsort.js line 26. In your examples this variable is defined outside the library, e.g. var dragsort = ToolMan.dragsort(); if the user calls it different the library doesn’t work.

makoomba

May 23rd, 2005 | 11:55 am

you can add

var dragsort = this

just before

helpers.map(items, function(item) ....

Tim Taylor

May 23rd, 2005 | 9:41 pm

Felix, thanks for pointing that out. Makoomba, thanks for posting the fix. I’ve added the fix to my development version and it will be included in my next release.
Tim Taylor

May 23rd, 2005 | 9:53 pm
Felix, regarding your first point, you suggest removing the following line from drag.js:
```
handle.onmousedown = function() { return false }
```
At least in Safari, without this line the browser thinks you’re also trying to select text and so it highlights any text you drag over. Justin Rhoades had a similar problem as you and submitted this workaround/fix:

> 1)removed from setHandle function: > “handle.onmousedown = function() { return false }” > > 2)added to dragInit function: > “ToolMan.events().register(document, ‘mousedown’, group.drag) > document.onmousedown = function() { return false }” > > 3)added to dragEnd function: > ToolMan.events().register(document, ‘mousedown’, group.drag) > document.onmousedown = function() { return true }

I haven’t tried this myself, but it should work. I plan to also incorporate this into the next release of my library.
badsegue

June 2nd, 2005 | 1:50 pm

Very nice. I’ve created a bookmarklet to manage Netflix queues using this library. It’s worked pretty well. I have noticed the text selection issue but it’s not a big issue for me. I also consolidated all the library files into one file to simplify inclusion.

Netflix Queue Manager
JimB

June 8th, 2005 | 11:39 pm

Tim, your work and that of others is commendable, but leaves me wanting (to inspire or hopefully pitch in) more..

To wit, can anyone point me to any forums discussing or already proving the combination of such DHTML pioneering with AJAX etc (presuming comparable stds that W3C may recommend) to create non-applet browser-based portal content management apps? If they’re likely rare or sequestered in proprietary secrecy, anyone care to speculate when such innovations will emerge in open-source, creative commons, or other open-license efforts??

Ah, the pursuit of killer apps..

é¿è \~/

tomas

June 9th, 2005 | 3:19 am

Thanks for a nice and free library! I encountered a problem when sorting a (html) table. If I sort TR-tags, it all works as expected. But with TBODY-tags, both IE and Opera fails (of course Firefox works great!), but they seem to fail for different reasons. IE does not set the offsetParent attribute correct for this the TBODY-tag, a workable workaround is using the parentNode instead. Opera does not set the offsetTop/offsetLeft/offsetHeight/offsetWidth attributes for this tag, so you have to use it’s first children instead. I’ve altered the topLeftOffset and bottomRightOffset functions in coordinates.js according to this (I’ve also removed the creation of a _ToolManCoordinate object in each loop iteration). Here’s the modified functions:

topLeftOffset : function(element) {
    var use_parentnode = element.nodeName=="TBODY" &amp;&amp; navigator.userAgent.toLowerCase().indexOf("msie")!=-1 &amp;&amp; typeof window.opera == 'undefined'; /* IE hack */
    var use_children = typeof window.opera != 'undefined'; /* Opera hack */
    var oLeft = use_children &amp;&amp; element.children.length ? element.children[0].offsetLeft : element.offsetLeft;
    var oTop  = use_children &amp;&amp; element.children.length ? element.children[0].offsetTop  : element.offsetTop;

    var parent =  use_parentnode ? element.parentNode : element.offsetParent;
    while (parent &amp;&amp; typeof parent == 'object' &amp;&amp;
            typeof parent.offsetLeft != 'undefined' &amp;&amp; typeof parent.offsetTop != 'undefined') {
       oLeft += parent.offsetLeft;
       oTop  += parent.offsetTop;
       parent = use_parentnode ? parent.parentNode : parent.offsetParent;
    }

    return this.create(oLeft, oTop);
},

bottomRightOffset : function(element) {
    var use_children = typeof window.opera != 'undefined'; /* Opera hack */
    var oWidth  = use_children &amp;&amp; element.children.length ? element.children[0].offsetWidth  : element.offsetWidth;
    var oHeight = use_children &amp;&amp; element.children.length ? element.children[0].offsetHeight : element.offsetHeight;
    return this.topLeftOffset(element).plus(this.create(oWidth, oHeight));
},

I’ve verified that it works on Firefox, IE6, Opera8, Camino, and Safari. This is just an ungly workaround, I don’t expect this to be part of the official version…

vikasjain

June 13th, 2005 | 12:34 am

Hi, i am new to css2 and xhtml I am workig on a project that requires me to have a Rectangular grid(3 column by 4 rows) of pictures to be displayed.With a feature for user able to drag a picture and drop in other cotnainer.That cotnainer is also a recagular grid.(Same size) Though i tried to play around with the examples given. In rectangular one i am able to drag and drop in same grid(as given in example) and as i am new to css2 and java script.Can any one help me. Though the examples provided are good in list but when i played around with css2 to make a grid of two column i made a mess. Help required
AndieR

June 13th, 2005 | 6:59 am
Hello,

First of all your work is really terrific and makes users life much easier indeed! Poeple love this!

I have incorporated this into a page where an user can see and manage all of the photos in his account. Sometimes there can be a few hundred of these and some people have been requesting for two tings that I wonder whether you may possibly have an idea on how I could implement…
- When you have a page with about 200 thumbnails and you wish to bring one of those at the bottom to the top area you have to drag it a little then scroll the page up then drag again and so on. Is it possible to enable auto scroll so that when you are dragging a thumb up the page will scroll with you?
- Is it possible to drag and drop several thumbs at the same time, like if you could crtl+click on three or four and select them all???
The first one is something that is requested very often. Any tips/ help you may have would be very much appreciated!

Thank you again, Andrea
Tim Taylor

June 15th, 2005 | 9:38 am

Tomas, thank you very much for the code submission. Often I start with an “ugly workaround” and then clean it up, so your code will come in handy.

vikasjain, currently my library only officially supports the dragging of list items. Check out this blog entry of examples of people who took my library and extended it to drag between lists.

Andie, I plan to support both of the features you describe. Of the two, auto scrolling is a high priority.
dlptriv

June 18th, 2005 | 4:16 pm

I’m sorry but there is a lot to read, but is this script able to be posted over PHP? I mean, is it set so that whatever you edit it will stay like that? I want to work on a page where only administrators can edit the layout, while visitors and regulars members can only see the changes. I want it so that it gets saves on the page and throught the internet so others can see the changes.
webfreakin

June 20th, 2005 | 11:54 am

Hi Tim,

I can’t seem to rearrange the order. I am trying it while logged in, on a mac OS X computer in Internet Explorer. The cross mark shows up, and the images can be dragged but then nothing happens when I release the mouse.

Are there any issues with the Mac?

thanks! Webfreakin
Tim Taylor

June 21st, 2005 | 11:32 am

IE on a Mac isn’t supported. Only Safari and Firefox are supported on OS X.
webfreakin

June 22nd, 2005 | 12:15 am

Hi Tim,

Thanks for your reply. Do you plan a fix for IE on the Mac in the near future?

Thanks, Webfreakin
rob c

June 24th, 2005 | 9:02 am
hi

Great work thanks! I’ve been messing/hacking around with the slider demo here:

http://www.folio11.co.uk/jstechdemo/

I’ve got the code to add/delete slides and fixed the problem of the label not following the slide if its being edited.

I’m no javascript guru - so I’ve probably done this in a really ugly way, but maybe you can take a look at the code and incorporate some of it ?

I think the main points was that I added an id to each of the li elements, eg id=”slide1″ and added ids to each of the text and field elements (eg id=”page1Edit” and id=”page1View”)

then in dragsort.js I addded
```
                var item = dragEvent.group.element;//gets the current li element

            num = item.id.charAt(item.id.length -1);//gets the number of the element

            var view = document.getElementById("page" + num + "View"); //gets the label associated with the element
            view.editor = document.getElementById("page" + num + "Edit"); //gets the editor associated with the element
            view.editor.blur(); // blurs the editor to close it
```
after
```
_onDragStart : function(dragEvent) {
```
rob c

June 24th, 2005 | 9:03 am

grr url should be

this
tivac

July 6th, 2005 | 2:16 pm
I’ve found what may be a bug, or perhaps is just intended functionality that I found surprising.

if you have a list inside of a list and have set DnD to use a Handle on the main list, the inside list becomes draggable independent of the main list.

For Example:
```
  Buttz
```
That ordered list will now be draggable, independent of the main list. Since I can’t have textareas or text input boxes inside of a droppable section without a lot of hacking around, that poses a problem. I’m going to go ahead and take a look at the JavaScript and see if I can find anything, but do you have any suggestions as to good places to look or possible causes?

I’ve confirmed that this is only a problem in Firefox, IE 6 doesn’t allow the textboxes to drag and instead the click jumps you into the text input field like it should.

More fleshed-out example is at http://zillasmash.com/dnd/test.htm
tivac

July 6th, 2005 | 2:19 pm
haha, not sure what happened to the example code. Let’s try this again:
```
Item

  Item
```
tivac

July 6th, 2005 | 2:23 pm

Well, so much for example html.

Just check out the page I linked.
dlpmaster

July 11th, 2005 | 12:46 pm

Can this instead of using List tags, can it be done with regular tables..? like being able to drag tables into place, intead of lists into place?
Ulrich

July 20th, 2005 | 4:36 am

Hi Tim, I’m sure I’m not the only one that is hoping for a v0.3 of your amazign library… Any chance of a sneaky peeky?

Cheers, Ulrich
Tijs

July 21st, 2005 | 11:49 am

I am basing a news portal interface on this script and i whipped up this quick prototype

It adds minimize/maximize to the windows and saves the state in a cookie too. Bit of a hack right now but it’s just to get an idea.

The next thing i want to add is animating the list items so when you pick one up the rest slide up to fill the gap. I can’t seem to find the place where the actual moving is done though. Would this be a at all possible or does the built in list ordering prevent the use of pixel by pixel animation to the new location…?
manxomfoe

July 25th, 2005 | 8:32 pm
Friendly bug report here: I’ve noticed that IE6 on XP doesn’t support handles when trying to use this code in the Slide Show example:
```
dragsort.makeListSortable(document.getElementById("slideshow"), setHandle)
```
It complains ‘factory is null or not an object’

I’m going to investigate today, but wanted to report my findings first. I’ll post again with any developments. (BTW - excellent work on the lib!)
manxomfoe

July 25th, 2005 | 9:19 pm
Good news: the problem with assigning the handle reference was IE DOM quirks-related. In the findHandle function, a different approach is needed:
```
        for (var i = 0; i = 0)  return child
    }
```
This works in IE6 and FF. Other browsers can probably be detected and supported pretty easily.
manxomfoe

July 25th, 2005 | 9:21 pm
Sorry - having trouble with the wordpress formmatting. Code is…
```
for (var i = 0; i = 0)  
  return child
}
```
</fingers crossed>
manxomfoe

July 25th, 2005 | 9:24 pm

I hate blogspam, but desparately want to share my findings. Hence try #3. Sorry about the mess, toolman taylor.

function findHandle(item) { var children = item.getElementsByTagName("div") for (var i = 0; i = 0) return child } return item }
John

July 28th, 2005 | 1:16 pm

Hi,

I am trying to do the following and wonder if it is possible to do in the next version. If not, would there be anyone willing to work with me to figure it out?

I have two lists. List A and List B. - I would like to drag from List A to List B - I would like to drag items from List B within List B, but not outside of List B. (i.e. List B can only drag within itself)

This next request is a bit trickier..

I would like to create a master list which always has a constant number of objects. An example would be a “Top 10″ list. This list would initially contain 10 slots which are all empty.

I would like to create a data list which has all available choices that could go into the master list. The data list could easily contain a few hundred items.

I would like to be able to drag items from the data list into the master list. When an item is dragged from the data list to the master list, it is added into the master list wherever it is dropped. So if I drag an item from the data list to the 6th position in the master list, it will overwrite the value in the 6th position in the master list. If a value already exists in the 6th position of the master list, it would be nice if it could be returned to the data list before it gets overwritten(so it doesn’t get lost in space).

Lastly, the master list would be sortable within itself. I could move something from position 6 to position 3. (Exactly how it does the sorting now in v0.2 - I just want to make sure this feature would still be available)

I would like to have a static number of objects in List B. This means that any drags from List A will overwrite an existing object in List B. So if I drop an item from List A into the 5th item in List B, the 5th item in List B gets overwritten by the item dragged from List A. The 5th item that got overwritten, would be sent to List A.

Is it possible to make a 1-way drag and drop.

ListA could be dropped into ListB, but ListB could not drop into ListA?

Is it also possible to have a set number of objects in ListB? If a user drags from ListA into ListB, it will overwrite the object in ListB that it drops over?

Thank you,

John
John

July 28th, 2005 | 1:18 pm

I apologize, I had some extra text in the previous post and I cannot edit it to remove it. Here is what I should have posted:

Hi,

I am trying to do the following and wonder if it is possible to do in the next version. If not, would there be anyone willing to work with me to figure it out?

I have two lists. List A and List B. - I would like to drag from List A to List B - I would like to drag items from List B within List B, but not outside of List B. (i.e. List B can only drag within itself)

This next request is a bit trickier..

I would like to create a master list which always has a constant number of objects. An example would be a “Top 10″ list. This list would initially contain 10 slots which are all empty.

I would like to create a data list which has all available choices that could go into the master list. The data list could easily contain a few hundred items.

I would like to be able to drag items from the data list into the master list. When an item is dragged from the data list to the master list, it is added into the master list wherever it is dropped. So if I drag an item from the data list to the 6th position in the master list, it will overwrite the value in the 6th position in the master list. If a value already exists in the 6th position of the master list, it would be nice if it could be returned to the data list before it gets overwritten(so it doesn’t get lost in space).

Lastly, the master list would be sortable within itself. I could move something from position 6 to position 3. (Exactly how it does the sorting now in v0.2 - I just want to make sure this feature would still be available)

Thank you,

John
mattfletcher

August 4th, 2005 | 9:46 am

I have a draggable unordered list, containing 100% width “A” tags, a la List-a-matic.

The code works fine in Opera and IE, but in Firefox, the mouseups after a drag are passed onto the link, meaning that there is no time to save the new list order before the page changes.

Is there any way to force Firefox to ignore the mouse clicks when they are caused by a drag? Note, the links still need to work with a standard click!
Leandro Ardissone

September 1st, 2005 | 10:53 am

Hi, I’ve tried to remove the background: #eee; from your example of dragging.html, and in IE when I drag it, it changes the text to something like bold.

Anyone has the same problem?
Leandro Ardissone

September 1st, 2005 | 10:57 am

Also if you try to remove the style: background-color: #eee;

in your example “dragging.html” you can see whats happen just in Internet Explorer.

Weird…

any solution?
Leandro Ardissone

September 1st, 2005 | 12:16 pm

I solved it commenting the opacity functions.
danoise

September 10th, 2005 | 8:19 am

Thanks for an excellent script. But I noticed a problem with MSIE6 (don’t know about other versions of MSIE): When the lists being sorted are part of a nested tree, it has an impact on the performance. The deeper inside the hierarchy they are nested, the slower the performance…

I could upload an example if this is not a known problem, or not reproducable.

It’s not exhibiting this behaviour in firefox.
crusu

September 15th, 2005 | 5:03 pm

I have checkboxes that are draggable but when they are checked on or off and then dragged, their state is lost right when the item is inserted before or after. Anyone have a solution for this? Thanks!
alancece

September 19th, 2005 | 2:45 pm

Has anyone figured out if it is possible to sort table rows with multiple columns?
J.

September 22nd, 2005 | 4:47 pm

I also get the “factory is null or not an object in” IE6 on dragEnd. Why is that? I do not think I’ve changed anything from your examples at all… manxomfoe’s solution seems strange.
Tedward

September 28th, 2005 | 2:22 pm

Hey Tim,

Wonderful code library! Thanks for putting it together. I do have an issue though - I’m encountering the “factory is null or not an object” error as well and was wondering if you’ve come up with a solution yet. The earlier posting by manxomfoe does not make any sense.

Thanks in advance….
duncan

October 7th, 2005 | 8:27 am

Tim,

This stuff is great. I have one quetion for you & the others here. I have a sortable list. I’ve written js code to add a new LI (using cloneNode & then changing the id & other parts of that LI). The problem I have is that when I try to drag the new I created, it moves the original LI that I cloned. If I run dragsort.makeListSortable(document.getElementById(”moveablelist”), verticalOnly, saveOrder); AFTER the new LI is created, it works fine. If that function runs at page load & then after the new LI is created, I get: ‘factory is null or not an object’ when I try to drop any LI.

Any suggestions?

Thanks, Duncan
fretoune

October 13th, 2005 | 9:13 am

Hi there,

First of all, thank you so much for such a great script. I’m trying to fit it to my needs, and I’m having a problem : I’m trying to delete an element of my list and in doing so, I lose the possibility to move the items… (I’m using Firefox). When I delete my element (a link next to it) it launches an xmlhttprequest that updates my sql database and reads again this database to provide the code for the new updated list. I then display the new list using innerHTML. As far as displaying the list is concerned, there’s no problem, but I simply lose (as I said) the ability to drag the items around. I have to refresh my page for the drag option to come back. I have no idea what to do. If anyone can help, thanks !!

PS : As I’ve read in earlier posts, I’ve tried to call the dragsort.makeListSortable function at different places, but it doesn’t seem to work…
alancece

October 18th, 2005 | 10:08 am

I have a question referring back to this post: http://blog.tool-man.org/toolman-dhtml-02-released/16#comment-32

Can someone explain how to unregister the drag a little more clearly to me, I’m not sure what the group is. Or an example would be perfect, thanks!
alancece

October 18th, 2005 | 3:55 pm

fretoune,

I don’t know if this would help, but one solution i have found is instead of reading the information back from the database and using innerHTML, you can always just hide the element that you deleted. Therefore it doesn’t show on the page after deleting. Works well for me, but I suppose it depends on how you are implementing it.
willogee

October 20th, 2005 | 5:46 pm

I’ve just started looked at this - seems very comprehensive.

I was hoping to produce a sortable list inside a draggable box. I just tried combining parts from the respective example pages, but when I put a list inside a draggable box, it was no longer sortable (although the box it was in could move around the page happily).

I can’t believe this isn’t possible using this library.

Any guidance to get me going would be much appreciated.

Thanks a lot. Will
kombat

October 26th, 2005 | 5:02 am

In regard to this comment: http://blog.tool-man.org/toolman-dhtml-02-released/16#comment-49

Does anyone have an example on how to sort tables?

Regards/Kombat
manxomfoe

October 26th, 2005 | 12:32 pm

To J and Tedward:

Sorry my commments were so cryptic. Having terrible difficulty w/ Wordpress code blocks. The problem is with the findHandle function as it’s used in the examplees. It’s not finding the children elemments that have a class of “handle”. I’ll try to insert the function here (with a bunch of carrots inserted)

> function findHandle(item) { > var children = item.getElementsByTagName(”div”) > for (var i = 0; i var child = children[i]; > if (child.attributes[’class’]) { > if (child.attributes[’class’].specified == false) continue > if (child.attributes[’class’].value.indexOf(”handle”) >= 0) return child > } > } > return item > }
kombat

October 30th, 2005 | 9:42 am

Me again…

… When I say sort I don’t mean anything like this[1], but something more like this[2] (but drag n’ drop).

So maybe I should refrase the question, does anyone know how to re-order a table?

[1] - http://www.mattkruse.com/javascript/sorttable/ [2] - http://surfmind.com/lab/table_reorder.cfm

/Kombat
travisapple

October 31st, 2005 | 12:35 pm

To manxomfoe, First off Thanks for the above comment! I think I spent about 4 hours on trying to fix this before seeing your post. For some reason the code didn’t quite come through so if you will excuse me for reposting a cleaned up version that I know works (on ie6).

function findHandle(item) { var children = item.getElementsByTagName(”div”) for (var i = 0; i = 0) { return child } } } return item }
travisapple

October 31st, 2005 | 12:38 pm

argh… I didn’t read the formatting tips on code like I should have. let’s try this again function findHandle(item) { var children = item.getElementsByTagName(”div”) for (var i = 0; i = 0) { return child } } } return item }

travisapple

October 31st, 2005 | 12:41 pm

! last time:

function findHandle(item) {
    var children = item.getElementsByTagName("div")
    for (var i = 0; i = 0) { return child }
        }
    }
    return item
}

markireland

November 5th, 2005 | 11:22 pm

I notice that the two list drag-and-drop code works well when the lists are styled tables ala FireWorks8.

http://www.markireland.com.au

(but what is going on in FireFox?)

knuckles

November 15th, 2005 | 4:05 am

Hello all, i’m trying to implement a basic autoscroll function. I’ve written the code below which seems to do what i want. If a draggable element is moved into the top 50 or bottom 50 pixels the page scrolls.

/*----------------------------------
    Auto Scroll Functions
----------------------------------*/

    var scroll_interval;
    var scroll_status = 0;

    function start_scroll_up()
    {
        scroll_interval = setInterval("scroll_up()", 5);
    }

    function start_scroll_down()
    {
        scroll_interval = setInterval("scroll_down()", 5);
    }

    function stop_scroll()
    {
        clearInterval(scroll_interval)
    }

    function scroll_up()
    {
        currentpos=document.body.scrollTop + 3;
        window.scroll(0,currentpos);
    }

    function scroll_down()
    {
        currentpos=document.body.scrollTop - 3;
        window.scroll(0,currentpos);
    }

    function check_cursor_position(evt)
    {
        var yPos;
        yPos = evt.clientY;

        if (self.innerHeight)
        {
            ySize = self.innerHeight;
        }
        else if (document.documentElement &amp;&amp; document.documentElement.clientHeight)
        {
            ySize = document.documentElement.clientHeight;
        }
        else if (document.body)
        {
            ySize = document.body.clientHeight;
        }

        if (yPos  (ySize - 50)) {   // scroll page up when cursor is 50 pixels from bottom
            if ((scroll_status == 0) &amp; (drag_started == 1)) {
                start_scroll_up();
                scroll_status = 1;
                }
            }

        else {
            if (scroll_status == 1) {
                stop_scroll();
                scroll_status = 0;
                }
            }
}
//--&gt;

where drag_started is set from the ‘dragstart’ and cleared at ‘dragend’ from the registered library triggers.

The only problem is the position of the element that is being dragged is not updated while the window is scrolling. I guess because the position is only refreshed when the mouse is moved and not when scrolling the window i.e. the cursor is not moving relative to the window even though the page is scrolling. A quick movement of the mouse will refresh the position of the element to under the cursor. I was wondering if there was any way of forcing the position of the element to be updated, which i could then put in the scrolling functions. I’ve tried forcing the internal library function _onDragMove but i can’t seem to pass it the right variables to get it to update.

Any ideas anyone?

markireland

November 16th, 2005 | 1:05 am

I notice your drag-and-drop code is being used at www.mySpace.com

If you have an account look at Top 8 Friends. You can drag and drop their pictures to reorder them. (Supposedly this site has 35 million users. I am told that News Corp bought the site)

Anyway, Tim your famous!
markireland

November 19th, 2005 | 3:14 am

If you view http://www.MarkIreland.com.au in IE you see one thing and

if you view it in FireFox you see another.

Why is that?

Thanks
Zilla Smash! » Blog Archive » New Surveys

November 20th, 2005 | 5:26 am

[…] was awesome to see, but once I had it up and running the problems started to crop up. The ToolMan DHTML library looked like it would do everything I needed, and at first blush it wo […]
http

November 27th, 2005 | 8:13 am

Fantastic stuff! Thanks for sharing Tim.

Would anyone be able to tell me why the cookies aren’t working at this address?:

http://www.ekstasis.net/resources/domlist.htm

The only change I made is removing the window.onload function items not relating to ul=boxes. (and the directory structure)

Thanks.
sebastiaan

December 15th, 2005 | 6:40 pm
@ knuckles and others

first of all Tim this is nice stuff !!!

but I have to agree with Knuckles about the lack of auto scrolling but i’ve put a little efford in hacking your script and made it scrolling for Safari and Firefox on the Mac

first of all i’ve added this function in the coordinates.js after mouseoffset : function ()
```
mouseInViewPos : function(event) {
    event = ToolMan.events().fix(event)
    if(document.body.scrollTop) {
        return this.mousePosition(event).minus(this.create(document.body.scrollLeft,document.body.scrollTop))
    } else {
        return this.mousePosition(event)
    }
},
```
This is because Safari 1.3s mouse position weirdness

and i added this piece of code inside drag.js within the _drag : function() after this line var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
```
if(dragEvent.mouseInViewPos.y  (dragEvent.clientSize.y - 25)) {
        if(document.body.scrollTop)
            document.body.scrollTop = document.body.scrollTop +  5
        } else if(document.documentElement.scrollTop){ 
            document.documentElement.scrollTop = document.documentElement.scrollTop +  5
        }
    }
```
and i’ve added these lines in function _ToolManDragEvent(type, event, group) {
```
this.clientSize = ToolMan.coordinates().clientSize(group.element)
this.mouseInViewPos = ToolMan.coordinates().mouseInViewPos(event)
```
after this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)

it should work on Firfox and i hope you and or someone else can clean up the code and make it work for IE and hopefully see the implementation in v0.3

sebastiaan

December 15th, 2005 | 6:47 pm

Sorry my 2nd piece of code got messed up, i forgot to transelate < and > hopefully this will work

if(dragEvent.mouseInViewPos.y &lt;  25) {
        if(document.body.scrollTop)
            document.body.scrollTop = document.body.scrollTop -  5
        } else if(document.documentElement.scrollTop){ 
            document.documentElement.scrollTop = document.documentElement.scrollTop -  5
        }
    }

    if(dragEvent.mouseInViewPos.y &gt; (dragEvent.clientSize.y - 25)) {
        if(document.body.scrollTop)
            document.body.scrollTop = document.body.scrollTop +  5
        } else if(document.documentElement.scrollTop){ 
            document.documentElement.scrollTop = document.documentElement.scrollTop +  5
        }
    }

kevin_mic

December 16th, 2005 | 12:00 pm
I thought I would comment on the IE6 findHandle function that people seem to be having problems with.

The code given by Tim looks like this
```
function findHandle(item) {
    var children = item.getElementsByTagName("div")
    for (var i = 0; i = 0)
            return child
    }
    return item
}
```
The problem seems to arrise in the this call — child.getAttribute(”class”) — Apparently in IE using element.getAttribute to get the class attribute always returns null, therefore setting the handle never works. After doing some research I found that their is an alternate way in IE to get at the class attribute. This is done by doing element.className.

so here is an alternative to the given code –
```
function findHandle(item) {
    var children = item.getElementsByTagName("div")
    for (var i = 0; i = 0)
            return child
    }
    return item
}
```
I don’t know if element.className is supported in the standard or supported by all browsers, but it does fix the IE6 bug.

kevin_mic

December 16th, 2005 | 12:13 pm

Apparently using lessthan and greaterthan tags in this completely screws up what you write. So here is my last try to post the correct code. Also that is why previous comments have looked funky by other people.

<code>
function findHandle(item) {
    var children = item.getElementsByTagName("div");
    for( var i = 0; i &amp;lt; children.length; i++ ) {
        var child = children[i];
        var className = child.getAttribute('class');
        if ( className == null )
            className = child.className;
        if ( className == null )
            continue;
        if ( className.indexOf('handle') &gt;= 0 )
            return child;
    }
    return item;
}
</code>

atomix

December 20th, 2005 | 1:17 pm

Hi,

my IE6 always returns the ‘factory is null or not an object’-error, Is there an working example to copy the code, i test any version of in the comments here, but no success.

Jens
scanetuk

January 8th, 2006 | 8:57 am

Hi,

Is there any way to put a sortable list within a sortable list, my efforts so far have not worked.

Cheers
badsegue

January 25th, 2006 | 1:19 pm
I encountered a bug recently. I’m using this library in my Netflix Queue Manager. The drag-n-drop capability was broken after Netflix updated their domutils.js script. For some reason they extended the Array class with an append() method that just wraps the native push() method.

The library has two instances where it uses the for … in construct to iterate over array elements. This is incorrect, as this will iterate over not just the elements, but also any user-defined properties. So the append() method was now being iterated over, which promptly failed when the handler was given this unexpected object.

The problem is solved by using the Array length property to access the proper range of elements:

This
```
`for (var i = 0; i 
```

badsegue

January 25th, 2006 | 1:21 pm

Trying again…

for (var i = 0; i &lt;  group._transforms.length; i++)

instead of

for (i in group._transforms)

dave_bevan

January 26th, 2006 | 11:38 am
Excellent script Tim.

Been playing a bit and come up with the following new addition to the dragsort.js module…

My requirement was to add new LI elements to an existing, already sortable UL (which I do via JS and createElement etc), but to make the new item dragable within that existing UL. As there is no easy way to makeListUnSortable, this new extension to Tim’s prototype is here for you all to comment/break etc! Of course, if you use removeChild to delete a LI from a UL, nothing is broken, as the event listeners for that specific get killed when you kill the LI itself.

Ok, here it is, it needs to be added to dragsort.js, just before the definition _onDragStart : function(dragEvent) {
```
addSortableItem : function(list, item) {
    var threshold = 8
    var coordinates = ToolMan.coordinates()
    var dragGroup = dragsort.makeSortable(item)
    dragGroup.setThreshold(threshold)
    var min, max
    dragGroup.addTransform(function(coordinate, dragEvent) {
        return coordinate.constrainTo(min, max)
    })
    dragGroup.register('dragstart', function() {
        var items = list.getElementsByTagName("li")
        min = max = coordinates.topLeftOffset(items[0])
        for (var i = 1, n = items.length; i 
```
dave_bevan

January 26th, 2006 | 11:40 am
Excellent script Tim.

Been playing a bit and come up with the following new addition to the dragsort.js module…

My requirement was to add new LI elements to an existing, already sortable UL (which I do via JS and createElement etc), but to make the new item dragable within that existing UL. As there is no easy way to makeListUnSortable, this new extension to Tim’s prototype is here for you all to comment/break etc! Of course, if you use removeChild to delete a LI from a UL, nothing is broken, as the event listeners for that specific get killed when you kill the LI itself.

Ok, here it is, it needs to be added to dragsort.js, just before the definition _onDragStart : function(dragEvent) {
```
addSortableItem : function(list, item) {
    var threshold = 8
    var coordinates = ToolMan.coordinates()
    var dragGroup = dragsort.makeSortable(item)
    dragGroup.setThreshold(threshold)
    var min, max
    dragGroup.addTransform(function(coordinate, dragEvent) {
        return coordinate.constrainTo(min, max)
    })
    dragGroup.register('dragstart', function() {
        var items = list.getElementsByTagName("li")
        min = max = coordinates.topLeftOffset(items[0])
        for (var i = 1, n = items.length; i &lr; n; i++) {
            var offset = coordinates.topLeftOffset(items[i])
            min = min.min(offset)
            max = max.max(offset)
        }
        //bbcNews_JSLib_debug(' min=' + min + ', max=' + max + ', i=' + i);
    })
},
```
You use it like this. Assume that you’ve already called makeListSortable(document.getElementById('mylist')) where mylist is your UL and you’ve added a new LI element as described above, you simply call:
```
dragsort.addSortableItem(document.getElementById('mylist'), document.getElementById('my_new_li_item_id') );
```
Ensure of course that your new LI element has been assigned an ID of ‘mynewliitemid’ otherwise it won’t work!

Comments here would be welcome.

– Dave (Intranet App Developer, BBC News, London UK).
tsramkumar

January 27th, 2006 | 5:09 pm

Awesome tool!! Marvellous work!! Just exactly what I was looking for. I am having this wiered “Factory is null or not an object” error pop up whenever I go out of the browser window upon draging the list item… Is it something specific to my browser settings? I tried to put the code in the dragEnd function where it does the group.notifyListeners and ToolMan.events().unregister calls in an if loop. basically do it only when the var group = this.toolManDragGroup is not null. Not sure if that is a nasty way to fix it rather than identifying what the exact cause is. Excuse me if so! But it got rid of that error.

Has anyone used this in .net aspx pages? If so, other than using a query string, do you hae any idea how I can send the reordered list item values to back my server? If I set the Listbox to run as a server control, I see only the original order. Any suggestions will really help me!

Lookingforward eagerly to new features in your next version!!

Thanks once again Tim for providing us all with a wonderful tool!
tsramkumar

January 31st, 2006 | 1:20 pm

Friends I was trying to add a element which would display the number of the cell starting from 1 after each of the element in the list. However, after the dragend, I am trying to renumber the innertext of elements starting from 1, but I still see the old values displayed. I am using the innetText property to change the value of the elements. I am basically doing this to show the cell numbers..a little more user firendly for my users. any idea how this can be achieved? Thanks
lucatoldo

February 2nd, 2006 | 6:49 am

This tool is simply great, compliments. I have an application for which one gets a long list of rows, e.g. 100. The user wants to be able to select multiple rows and drag them to another position. How can it be done with your code ? I managed so far only single drag and drop. An example of what I would like to achieve (with Tool-man library) is shown in http://webmail.mbn.ch/table/musel.htm , however it does not refresh the table and it is not GPL.. I would very much appreciate your comment. compliments again. this is the best implementation of the draggable list I have found. luca
Henner

February 15th, 2006 | 2:51 pm
Hello, if found a little problem with the new version. If you use the overflow attribute auto the sorting will not work. Here is an example page:;

Drag & Drop Sortable Lists with JavaScript and CSS
```
ul.boxy li { margin: 0px; }
















alpha
bravo
charlie
delta
echo
foxtrot
golf
hotel
india
juliet
kilo
lima
mike
november
oscar
papa
quebec
romeo
sierra
tango
uniform
victor
whiskey
xray
yankee
zulu
```
utahgolfer

March 17th, 2006 | 12:42 pm

First of all let me say this one cool library of scripts. One issue I am having though is with the “factory is null” error in IE 6. I have tried the fixes mentioned here all of them to no avail. I see the error even in the examples pages. It happens when you are draggin an item below or aboe the current window (arrow up or scroll mouse will scroll the page) then releasing the item gives you the error. Anyone have any other ideas of how to fix this issue.

thanks in advance
b-low

March 29th, 2006 | 1:27 pm

I’m attempting to alter the files and incorporate PHP into the mix (not a problem) problem is if I dice up the example page nothing works. What am I missing?
atxatx

March 31st, 2006 | 3:13 am

I have a strange problem with firefox 1.0x… When I reorder a list with an input element in the firefox doesnt post the moved input of the moved element. how can I fix that? or am i missing something?

thnaks in advance,
labradors

April 6th, 2006 | 9:01 am

Vikasjain mentioned using this with a 3×4 grid of pictures. I, too, am trying to use a grid of pictures. In my case, it is a 4×6 grid of up to 24 photos, and I am not trying to allow dropping to some other “container” (his terminology), but only to allow reordering the photos in a manner similar to the “Sorting in two dimensions” example.

So far, I have not been able to get the whole thing to work. If I use a table so that the grid will be 4×6 regardless of screen or browser-window size, the drag-and-drop does not work (the pictures move, but never drop into place). If not, then the pictures all appear in a single, vertical line (and the drag-and-drop DOES work).

How may I arrange the pictures in a 4-column-by-6-row grid that will allow me to use the drag-and-drop to change the order of the pictures?

Although I have 28 years of computer experience, my web-related experience is only in PHP, MySQL, and very basic HTML and Javascript, so this CSS stuff is still a little mysterious.

Thanks!
sputnik

April 7th, 2006 | 7:08 pm

Great scripts! I am using dnd for a 2d list, and I would like to add an href in each list element to allow that item to be deleted and then update the list on screen. My javascript programming has been limited to fairly straightforward web applications, so my OO programming is not particular sophisticated. I am having trouble getting this functionality to work. If anyone would be willing to help out I would really appreciate it. Thank you!
Evon

April 10th, 2006 | 12:18 pm

From what I read here there this is supposed to work in Safari, and the underlying stuff from youngpup.net does work on mac safari, but no examples on this site seem to. Has anyone resolved this ? Max osx Safari 2.0.3(417.8)
Evon

April 10th, 2006 | 12:55 pm

FYI.. It’s the example in the download that isn’t working on safari, not what is here on the site..
fcavassini

April 14th, 2006 | 9:04 pm
Hi, First of all, thanks Tim for the library, it provides awesome functionality to web applications.

I aplogize if this is a very basic question, but I’m new to JavaScript.

My problem is the following: I can’t get to have a page with two sorteable lists (each one works independent from the other, no need to pass items between them). The (erroneous) code I made look like this:
```
var dragsort1;
var dragsort2;
dragsort1 = ToolMan.dragsort(); 
dragsort2 = ToolMan.dragsort();
dragsort1.makeListSortable(ele1,saveOrder);
dragsort2.makeListSortable(ele2,saveOrder); 
```
At this point I figured out that ToolMan.dragsort(); is not a constructor, but a pointer instead.

How can I have two instances of a sorteable list in one page? I’ll appreciate any clue to get this to work.

Best Regards Fabio Cavassini
gcphost

April 16th, 2006 | 8:49 pm

Sorry to repeat but whats up with: ‘factory is null or not an object’, seems IE only.

Seems no solution was really posted.
labradors

April 17th, 2006 | 9:24 pm

Still don’t have an answer for the picture grid, but never mind: I got it to work with Scriptaculous, instead.
gcphost

April 18th, 2006 | 8:37 pm

Here we go, must missed in in the reply to the last posting.

“I’ve detedted a javascript error in your tool-man example pages.

I’ve fixed the error adding the next line: if (!group) return into line 181 of drag.js”
Arpa

April 19th, 2006 | 6:34 am

Is there any way to make this work with scrollable layers. When I scroll the layer to drag an item that is not originally visible the item is dropped too far left. I quess the amount is off by the scrolled length.

so overflow: scroll is a no no at the moment. Problem is I can’t fit al the elements to fixed size window.

I tried to modify coordinates.js, but without anything else than a bad headache.
Chatter

April 28th, 2006 | 1:43 pm

Wonderful, simple, useable!

How to use this to make a collaborative text editor? Or to make a collaborative web page that doesn’t require a full page refresh? AJAX?
dino

May 5th, 2006 | 12:28 pm

Tim, this API is just great. I’m trying the Slides order example, and i’m having problems with IE. With firefox it works perfect, but when on IE when i drag some slide, it leaves spaces as if there were some invisible slides in the middle.

Anyone had the same situation? Possible solutions??

Thanks Again! Dario
canonman

May 31st, 2006 | 11:46 am
For anyone trying to use this script and have editable content. When you define a handle, the javascript function simply takes a way the _dragInit trigger from non-handle elements. What it needs to also do is enable other mouse events, or more specifically, allow onmousedown to return true. To accomplish this all you need to do is replace this following lines of code in drag.js
```
setHandle : function(handle, isEditable) {
    var events = ToolMan.events()
    handle.toolManDragGroup = this
    events.register(handle, 'mousedown', this._dragInit)
    handle.onmousedown = function() { return false }

    if (this.element != handle) {
        events.unregister(this.element, 'mousedown', this._dragInit)
        if (isEditable) {
            this.element.onmousedown = function() { return true } 
        }
    }
},
```
Now change your set handle function to:
```
function setHandle(item) {
    item.toolManDragGroup.setHandle(findHandle(item), "true");
}
```
This way, if you want selectable draggable contents, just add that last parameter. If not, leave it out.

Sorry if my code isn’t coded expertly, I’m no pro-coder.
adam

June 12th, 2006 | 11:33 pm

Me likes!!! I have been looking for something like this for a while now to incorporate into my custom CMS. I think instead of Having all the content in the list I will just pass a mock up discription to a popup, or even cooler, a lightbox.

For all those above looking for support for IEMac. Microsoft has quit developing or distributing IEMac. I think they say to try out firefox. IE5Mac is worse then IE for Windows with CSS or at least until IE7 comes out.
adam

June 13th, 2006 | 1:35 am

There is a question above about posting into php. Because Javascript is client side and the saved order gets stored in a cookie, you can use the cookie to read the sort order. I used echo $_COOKIE[’list-boxes’] for my list but it looks like the names change per each type of list example. but whateva! That can be exploaded and used to define the sort order.

Also, instead of using the actual content from the list I found it more usefull to identify the list item with an id. I will be dynamically generating via mysql. so i copied the serializeList fuction and made it return the id of the list item rather then the content. The content is going to end up being snipits of page content and this is going to be a layout manager. I just wish it wasn;t so javascript based.

I also copied the inspect list order function and made it submit the form rather then just alerting it.

So now i have my sort order in a cookie. I am relativly new to cookies, but it would be best to set it and then destroy it. so there is no confusion when the user comes back. I am in the process of making a cms for my client, and this really helps. I will ask them if i can GPL the end product. if so i will definatly be contacting the tool man
adam

June 13th, 2006 | 5:41 pm

SO after a fun filled all nighter with the library, I found some stuff out I’d like to share. I guess you can’t post javascript very well. The whole server / client side thing kinda gets in the way. I was never much for javascript writing anyways, but I managed to get this working. So instead I bumbed the order array out to the url and then collected it on the reload with if isset $_get into my sql query. It’s kinda ugly but all this stuff sits in a secure area anyways. I can’t share my stuff just yet, i need to optimize a bit and get rid of the sensitive stuff
EXE.trim.ALL

June 18th, 2006 | 12:45 pm

Hello people! I’m sorry for me rnglish, but I need your help… I like Tim Taylor’s Drag & Drop Sortable Lists and Tom Westcott’s Multi List Drag Drop very much. But functionality of Tom Westcott’s script is too feeble. I want to use multi list d&d in my CMS. How can I get functionality of Tim Taylor’s script and abilities of Tom Westcott’s script? I already ported Tom Westcott’s script from SAJAX to XAJAX. And it’s realy work. I created menu editing in admin panel that using d&d, but i need mor functionality like handles. Please help me, and I never forget you!
EXE.trim.ALL

June 18th, 2006 | 12:57 pm

And one more: I already created something like Tim Taylor’s shopping cart, but I used his multi list sorting only.
weiyuh.chang

June 29th, 2006 | 2:02 pm

Hi, Great tool. When I also use prototype.js/scriptaculous.js to do some ajax works in the same page, script error occurs and the sortable list does not work. Seems to me could be names confict between prototype.js and drag.js. Does anybody know how to fix this problem? Thanks.
augustd

July 11th, 2006 | 8:06 pm

Many thanks for this script Tool Man! I’ve found that it does work for sorting table rows if you change two lines in dragsort.js to look for TR’s instead of LI’s:

Line 23 from: var items = list.getElementsByTagName(”li”) to: var items = list.getElementsByTagName(”tr”)

Line 33 from: var items = list.getElementsByTagName(”li”) to: var items = list.getElementsByTagName(”tr”)
!teo

July 17th, 2006 | 3:43 pm

salut!

i gotta say … greatjob with this release man! i like your streamofconsciousness …and i hope your neurons will help me on this, cuz i tried to modify so many things around your script, but nothing to help me happened… take a look on this: http://spinicrus.evonet.ro/ajaxeditor/testPage.html …and click on “show” from any of the items from that list… you’ll get the ideea of what i want to do… now, my questions is obvious , but ill ask it anyway: why the TinyMCE looks like that ?! i saw that this WYSIWYG editor is mentioned somewhere on this site, but did’t undestood in what context… so … could you please help me … i’m running out of time on this project, and i have no f****** ideea on how to solve this… i’ll bye you a beer… chears!
!teo

July 17th, 2006 | 7:56 pm

nervermind, i figured out: just comment this css line from lists.css(clickable a class): display: block;

…and that’s it! looks like i’m gonna buy myself a couple of beers… chears!
mdda123

July 22nd, 2006 | 10:54 am

Excellent library.

FWIW - since I wanted to strip out whitespace and comments, I had to go through your javascript adding (numerous) ‘;’. If you’d like me to send over the resulting source, please let me know. ( I’ve made sure your licensing comment stays intact, though ).
Hideaway

September 15th, 2006 | 4:44 pm

Tim, I just found your library and WOW! EXCELLENT work and great use of patterns!

It’s given me a new inspriation to extend my JS and DHTML skills!

Great job!

-D
elguapo

September 30th, 2006 | 5:52 am
Tim,

Compliments on your script; it works great!

I want to use the draggable list as navigation, using the first element in the list. I added a small function to get this first element to core.js: showFirstItem : function(id) { var list = document.getElementById(id) var items = list.getElementsByTagName("li")
```
    alert(ToolMan.junkdrawer()._identifier(items[0]))
}
```
It works when I call as onclick event (e.g. ).

Now, I would like to trigger it on dragend. In dragsort.js I added “junkdrawer.showFirstItem(’boxes’)” at the end of the _onDragEnd function. It works, but sorting the list gives unexpected behaviour in FF (1.5.0.7): it sorts in a really strange way. It works ok in IE7, but I need this to work in FF.

Any idea how I can fix it?
elguapo

September 30th, 2006 | 7:28 pm

Ok, found out that the strange behaviour was caused by the alert. When just returning a value it works OK.

The next challenge is to combine the tool-man script with moo.fx (http://moofx.mad4milk.net/). When adding the lines
to the example page things stop to work. To give extra confusion no error messages appear…

Martin

October 2nd, 2006 | 12:41 pm

Hello, I have downloaded your script, and I would like to use it, but I have a problem ! There is m code : [code]

Drag & Drop Sortable Lists with JavaScript and CSS

        Cat&eacute;gories

        <a href="http://trains-idf.net/?cat=2" rel="nofollow">Organisations</a>

                    <a href="http://trains-idf.net/organisations/la-ratp-regie-autonome-des-transports-parisiens/" rel="nofollow">&#187; La RATP</a>
                    &#187; SNCF - Transilien
                    &#187; Le STIF






        <a href="http://trains-idf.net/?cat=3" rel="nofollow">Le M&eacute;tro</a>

                    <a href="http://trains-idf.net/?cat=7" rel="nofollow">&#187; Histoire</a>
                    <a href="http://trains-idf.net/?cat=8" rel="nofollow">&#187; Lignes</a>
                    <a href="http://trains-idf.net/?cat=9" rel="nofollow">&#187; Mat&eacute;riels</a>
                    <a href="http://trains-idf.net/?cat=10" rel="nofollow">&#187; Extensions</a>






        <a href="http://trains-idf.net/?cat=4" rel="nofollow">Le RER</a>

                    <a href="http://trains-idf.net/?cat=14" rel="nofollow">&#187; Histoire</a>
                    <a href="http://trains-idf.net/?cat=13" rel="nofollow">&#187; Lignes</a>
                    <a href="http://trains-idf.net/?p=7" rel="nofollow">&#187; Mat&eacute;riels</a>
                    <a href="http://trains-idf.net/?cat=11" rel="nofollow">&#187; Extensions</a>






        <a href="http://trains-idf.net/?cat=5" rel="nofollow">Le Tramway</a>

                    <a href="http://trains-idf.net/?cat=15" rel="nofollow">&#187; Histoire</a>
                    <a href="http://trains-idf.net/?cat=16" rel="nofollow">&#187; Lignes</a>
                    <a href="http://trains-idf.net/?cat=17" rel="nofollow">&#187; Mat&eacute;riels</a>
                    <a href="http://trains-idf.net/?cat=18" rel="nofollow">&#187; Extensions</a>

[/code]

The don’t drag and drop ! What’s the problem ?

Thanks !

fermdp

October 4th, 2006 | 3:11 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
falling

December 20th, 2006 | 5:29 pm

Hi, Has anyone figured out how to make this work on a page that also uses prototype.js? I’ve tried various things, but haven’t managed to get rid of the conflict and make it work at the same time.

I’m wondering what this is for?:

_ToolManCoordinate.prototype = {

there are only a few references to prototype in the library.
sqoo

January 20th, 2007 | 5:06 pm
Hi there,

First of all thanks for putting all this work out there, its a fantstically useful and versitile little toolkit that has saved me countless hours of work and made my latest DHTML based app really simple to use.

Unfortunately, I have found a problem when putting a draggable list in an absolutely positioned div with a fix height and an auto overflow, when the list is long enough to cause a scrollbar the wrong co-ordinates are calculated to find the drag target.

I have put an example here: http://www.sqoo.co.uk/test/list_example.html

Unfortunately this particular configuration is rather useful, especially when contained within a draggable div

Snippet:
```
List Item 1
List Item 2
... continue untill ..
List Item 14
List Item 15


Drag the bottom item up 1
```
I would investigate further, but I have a Wed deadline for a big project.

Cheers, Dave
mark

January 25th, 2007 | 5:12 pm

Sorry to sound like a total dumb-ass, but is there any documentation for the API? Can you tell I’m new to this?
pennstater

February 7th, 2007 | 7:06 pm

Tim… great utility. Haven’t seen you reply to any messages lately… everything okay?

In reading through the other messages, I came across some problems as it relates to _dragEnd, where group = this.toolManDragGroup comes back as null or not an object. You can get around it with the if(!group) return; statement, but this severely slows down any subsequent reorders of the list (I’m assuming that the events never get “unregistered” and start slowing everything down).

With that said, what I am trying to do is to add a new list item (li) to the unordered list using document.createElement(”li”)… just as others have done above. I then make a call to dragsort.makeListSortable(*myULElement*, setHandle). This allows me to drag my new list item up and down the unordered list, but as soon as I drag an existing item below the new item (regardless of where it is in the list), I receive the error 'factory' is null or not an object at the line…

var dragEvent = group.factory._createEvent('dragend', event, group)

I put an alert(event.type) within the _dragEnd function, and noticed that the mouseup event fires twice!?, with the second “firing” producing the error. Remember, this only happens when an existing list item is dragged BELOW the newly created list item, regardless of where the newly created list item is within the unordered list. I also tried using event.cancelBubble = true; thinking that maybe there was event bubbling occurring, but that had no effect.

I also tried implementing the function submitted by dave_bevan (addSortableItem). While no errors occur, I can’t drag the newly created list item. I can drag any original list item around the newly created list item, but that’s it. Seems like it needs a reference to the handle, but I didn’t have any success using setHandle either.

Any help from either Tim or anyone else reading this blog would be greatly appreciated.

BTW mark, you don’t sound like a total dumb-ass… some documentation for the API would be a great addition.

Thanks again Tim for putting your code out here for everyone to use.
tsdragon

February 15th, 2007 | 11:02 am
Get work! Your slideshow example was almost just what I need for a project. But I needed the ability to add new slides too. I made a copy of makeListSortable and changed a few lines and got makeListItemSortable. It’s functionality is identical to makeListSortable, except that you pass it a reference to the list item instead of the whole list (you have to have created the list item and added it to the list first). Just add this to dragsort.js:
```
makeListItemSortable : function(item) {
    var helpers = ToolMan.helpers()
    var coordinates = ToolMan.coordinates()

        var dragGroup = dragsort.makeSortable(item)
        dragGroup.setThreshold(4)
        var min, max
        dragGroup.addTransform(function(coordinate, dragEvent) {
            return coordinate.constrainTo(min, max)
        })
        dragGroup.register('dragstart', function() {
            var items = item.parentNode.getElementsByTagName("li")
            min = max = coordinates.topLeftOffset(items[0])
            for (var i = 1, n = items.length; i < n; i++) {
                var offset = coordinates.topLeftOffset(items[i])
                min = min.min(offset)
                max = max.max(offset)
            }
        })

    for (var i = 1, n = arguments.length; i < n; i++)
        arguments[i](item)
},
```
I also cleaned up the editing API quite a bit for that example something you had commented TODO). I created a makeEditor function (a modified version of the existing join function) that is passed to makeListSortable or makeListItemSortable after the setHandle parameter. Using that tou don’t have to create editors, they’re created automatically for existing and new list items. It also means you don’t have to insert ids for “oneEdit” and “oneView” etc. and you don’t have to call the join function for each list item. The entire example is at http://www.tsdragon.com/toolman/slideshow.html

Thanks for the great work! I hope my contributions are useful.
jriffel

February 24th, 2007 | 1:40 pm

For those who are having difficulties with using prototype.js and toolman’s library at the same time, here is your solution:

It is actually a fundamental issue with libraries which extend (add functions) to the basic javascript object (this includes prototype.js and others such as JSON.js). The problem is that arrays are actually objects in javascript, and by extending the basic object in javascript to add a function you automatically are adding members to all arrays. This has implications in javascript code, consider the following:

var test = array(’this’, ‘that’);

Normally you can have a simple loop such as:

for (var i in test) alert(test[i]);

which will alert 2 times with ‘this’ and ‘that’. When you use a library such as prototype.js or something which extends the basic object and adds a function named ‘foo’ you will actually get 3 alerts, ‘this’, ‘that’, and ‘function foo’.

This breaks many pieces of code which for loop on arrays, which includes the toolman library. This is not a bug in either direction, just a fact of the language construct and how prototype and others use the language.

There is an easy solution which I have found myself implementing a LOT in 3rd party javascript:

for (var i in test) { if (typeof test[i] == “function”) continue; alert(test[i]); }

I had to fix 2 places in drag.js which processed an array with a ‘for (var xx in yy)’ and this enabled the library to work happily with prototype (and others).

Hope this helps everyone.
allanjr

February 24th, 2007 | 10:04 pm

Awesome job on the script Tim!

I am a teacher and I use it to create two dynamic word lists for students so they can increase their vocabulary. With Perl, JavaScript and your draggable list, things work like a charm! My students like trying to match up two lists of words, and my script generates new words all the time Cheers!

One question: Is it possible to turn off the ability to drag via JavaScript dynamically somehow? I’d like to be able to do this when they are finished so the list becomes static (un-draggable).
Bacteria Man

April 1st, 2007 | 6:51 pm

Hi Tim,

I stumbled upon your impressive examples while researching alternatives to Scriptaculous.

I’m currently working on a web-based application which uses Scriptaculous to reproduce the behavior found here:

http://www.gregphoto.net/sortable/advanced/

Specifically, sortable elements within sortable groups. In addition, the elements are interchangable between groups and can be dragged any direction (not just vertically.)

Question: how much work would be involved to convert this example to your library? I suspect judging my your examples the answer is “not much”, but any advice/insight you could offer would be greatly appreciated.

Thank you, John
vesoosev

April 2nd, 2007 | 3:25 am

Hi! I’m from Bulgaria.

Apologize me for the bad english!

I am examining your briliant work and because I’m a newbie, I can’t understand the following code:

_showDragEventStatus : function(dragEvent) { window.status = dragEvent.toString() }, Where are you come from the dragEvent parameter?
Rodrigo

April 3rd, 2007 | 10:40 am

@ jriffel Your solution didn’t work well here, what exactly did you change? Could you send me your changed files? (sktforfun@gmail.com) I need to fix this asap and I can’t find help anywhere

I changed this: for (i in group.transforms) { if (typeof group.transforms[i] == “function”) continue var transform = group._transforms[i] newTopLeftOffset = transform(newTopLeftOffset, dragEvent) }

That fixed the error “this._each is not a function” But now i get this error: “iterator is not a function”

Please someone help me

Thanks
fsg

April 16th, 2007 | 5:37 am

If you get a javascript conflict between toolman and prototype first see jriffel post above, if you still have no luck try changing the lines below in toolman’s drag.js

CHANGE

for (i in group.transforms) { var transform = group.transforms[i] newTopLeftOffset = transform(newTopLeftOffset, dragEvent) }

TO

for (var i= 0; i < group.transforms.length; ++i) { var transform = group.transforms[i] newTopLeftOffset = transform(newTopLeftOffset, dragEvent) }

AND CHANGE

for (i in listeners) { listenersi }

TO for (var i= 0; i< listeners.length; ++i) { listenersi }