Version 0.2 of ToolMan DHTML Released

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:

  1. IE support. Most examples have been verified to work properly in IE6.

  2. 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.

  3. It’s free! Permission granted for personal and commercial use via the
    liberal MIT license.

  4. Improved quality. Cleaner, less duplicated code. Where possible,
    library modules have unit tests written using Selenium.

  5. This is only version 0.2. It just gets better from here.

About these ads

148 Comments (+add yours?)

  1. ori102281
    Apr 27, 2005 @ 11:53:56

    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?

    Reply

  2. ameketa
    May 06, 2005 @ 13:11:44

    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.

    Reply

  3. Tim Taylor
    May 07, 2005 @ 09:00:48

    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.

    Reply

  4. heibao
    May 10, 2005 @ 09:09:57

    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 ?

    Reply

  5. Tim Taylor
    May 10, 2005 @ 15:10:23

    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.

    Reply

  6. astrobot
    May 13, 2005 @ 18:34:24

    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. :-)

    Reply

  7. Tim Taylor
    May 15, 2005 @ 13:33:35

    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.

    Reply

  8. astrobot
    May 15, 2005 @ 22:42:33

    Thanks! Just what I needed!

    Reply

  9. kevin
    May 18, 2005 @ 20:18:21

    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?

    Reply

  10. Tim Taylor
    May 18, 2005 @ 21:55:42

    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][1] which he built off of version 0.1 of my library.

    [1]: http://blog.tool-man.org/drag-between-lists/12

    Reply

  11. makoomba
    May 19, 2005 @ 09:30:15

    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

    Reply

  12. makoomba
    May 19, 2005 @ 09:35:31

    sorry, but the previous post is messed up

    just changing this in

    for (var i=0;i < group._transforms.length;i++) ….
    for (var i=0;i < listeners.length;i++) ….

    solved the problem.
    many thanks for your code (it saved me a lot of time) and please forgive my poor english.

    Reply

  13. Felix Gnass
    May 23, 2005 @ 04:26:57

    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.

    Reply

  14. makoomba
    May 23, 2005 @ 11:55:15

    you can add

    var dragsort = this

    just before

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

    Reply

  15. Tim Taylor
    May 23, 2005 @ 21:41:07

    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.

    Reply

  16. Tim Taylor
    May 23, 2005 @ 21:53:52

    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.

    Reply

  17. badsegue
    Jun 02, 2005 @ 13:50:46

    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](http://badsegue.org/archives/2005/05/26/netflix-queue-manager)

    Reply

  18. JimB
    Jun 08, 2005 @ 23:39:14

    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..

    é¿è
    \~/

    Reply

  19. tomas
    Jun 09, 2005 @ 03:19:13

    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” && navigator.userAgent.toLowerCase().indexOf(“msie”)!=-1 && typeof window.opera == ‘undefined'; /* IE hack */
    var use_children = typeof window.opera != ‘undefined'; /* Opera hack */
    var oLeft = use_children && element.children.length ? element.children[0].offsetLeft : element.offsetLeft;
    var oTop = use_children && element.children.length ? element.children[0].offsetTop : element.offsetTop;

    var parent = use_parentnode ? element.parentNode : element.offsetParent;
    while (parent && typeof parent == ‘object’ &&
    typeof parent.offsetLeft != ‘undefined’ && 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 && element.children.length ? element.children[0].offsetWidth : element.offsetWidth;
    var oHeight = use_children && 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… :)

    Reply

  20. vikasjain
    Jun 13, 2005 @ 00:34:09

    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

    Reply

  21. AndieR
    Jun 13, 2005 @ 06:59:09

    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

    Reply

  22. Tim Taylor
    Jun 15, 2005 @ 09:38:20

    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][1] of examples of people who took my library and extended it to drag between lists.

    [1]: http://blog.tool-man.org/drag-between-lists/12

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

    Reply

  23. dlptriv
    Jun 18, 2005 @ 16:16:49

    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.

    Reply

  24. webfreakin
    Jun 20, 2005 @ 11:54:34

    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

    Reply

  25. Tim Taylor
    Jun 21, 2005 @ 11:32:57

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

    Reply

  26. webfreakin
    Jun 22, 2005 @ 00:15:38

    Hi Tim,

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

    Thanks,
    Webfreakin

    Reply

  27. rob c
    Jun 24, 2005 @ 09:02:13

    hi

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

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

    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) {

    Reply

  28. rob c
    Jun 24, 2005 @ 09:03:13

    Reply

  29. tivac
    Jul 06, 2005 @ 14:16:40

    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

    Reply

  30. tivac
    Jul 06, 2005 @ 14:19:02

    haha, not sure what happened to the example code. Let’s try this again:

    Item

    Item

    Reply

  31. tivac
    Jul 06, 2005 @ 14:23:10

    Well, so much for example html. :(

    Just check out the page I linked.

    Reply

  32. dlpmaster
    Jul 11, 2005 @ 12:46:31

    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?

    Reply

  33. Ulrich
    Jul 20, 2005 @ 04:36:23

    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

    Reply

  34. Tijs
    Jul 21, 2005 @ 11:49:04

    I am basing a news portal interface on this script and i whipped up [this quick prototype](http://www.tijs.org/dd_test/)

    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…?

    Reply

  35. manxomfoe
    Jul 25, 2005 @ 20:32:17

    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!)

    Reply

  36. manxomfoe
    Jul 25, 2005 @ 21:19:26

    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.

    Reply

  37. manxomfoe
    Jul 25, 2005 @ 21:21:06

    Sorry – having trouble with the wordpress formmatting. Code is…

    for (var i = 0; i = 0)
    return child
    }

    </fingers crossed>

    Reply

  38. manxomfoe
    Jul 25, 2005 @ 21:24:08

    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
    }
    `

    Reply

  39. John
    Jul 28, 2005 @ 13:16:02

    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

    Reply

  40. John
    Jul 28, 2005 @ 13:18:31

    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

    Reply

  41. mattfletcher
    Aug 04, 2005 @ 09:46:46

    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!

    Reply

  42. Leandro Ardissone
    Sep 01, 2005 @ 10:53:16

    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?

    Reply

  43. Leandro Ardissone
    Sep 01, 2005 @ 10:57:04

    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?

    Reply

  44. Leandro Ardissone
    Sep 01, 2005 @ 12:16:50

    I solved it commenting the opacity functions.

    Reply

  45. danoise
    Sep 10, 2005 @ 08:19:21

    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.

    Reply

  46. crusu
    Sep 15, 2005 @ 17:03:44

    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!

    Reply

  47. alancece
    Sep 19, 2005 @ 14:45:30

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

    Reply

  48. J.
    Sep 22, 2005 @ 16:47:53

    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.

    Reply

  49. Tedward
    Sep 28, 2005 @ 14:22:14

    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….

    Reply

  50. duncan
    Oct 07, 2005 @ 08:27:08

    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

    Reply

  51. fretoune
    Oct 13, 2005 @ 09:13:59

    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…

    Reply

  52. alancece
    Oct 18, 2005 @ 10:08:46

    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!

    Reply

  53. alancece
    Oct 18, 2005 @ 15:55:57

    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.

    Reply

  54. willogee
    Oct 20, 2005 @ 17:46:51

    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

    Reply

  55. kombat
    Oct 26, 2005 @ 05:02:29

    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

    Reply

  56. manxomfoe
    Oct 26, 2005 @ 12:32:55

    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
    > }

    Reply

  57. kombat
    Oct 30, 2005 @ 09:42:54

    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

    Reply

  58. travisapple
    Oct 31, 2005 @ 12:35:29

    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
    }

    Reply

  59. travisapple
    Oct 31, 2005 @ 12:38:52

    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
    }

    Reply

  60. travisapple
    Oct 31, 2005 @ 12:41:34

    ! last time:

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

    Reply

  61. markireland
    Nov 05, 2005 @ 23:22:02

    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?)

    Reply

  62. knuckles
    Nov 15, 2005 @ 04:05:11

    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 && 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) & (drag_started == 1)) {
    start_scroll_up();
    scroll_status = 1;
    }
    }

    else {
    if (scroll_status == 1) {
    stop_scroll();
    scroll_status = 0;
    }
    }
    }
    //–>

    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?

    Reply

  63. markireland
    Nov 16, 2005 @ 01:05:38

    I notice your drag-and-drop code is being used at http://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!

    Reply

  64. markireland
    Nov 19, 2005 @ 03:14:55

    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

    Reply

  65. Trackback: Zilla Smash! » Blog Archive » New Surveys
  66. http
    Nov 27, 2005 @ 08:13:29

    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.

    Reply

  67. sebastiaan
    Dec 15, 2005 @ 18:40:16

    @ 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

    Reply

  68. sebastiaan
    Dec 15, 2005 @ 18:47:39

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

    if(dragEvent.mouseInViewPos.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
    }
    }

    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
    }
    }

    Reply

  69. kevin_mic
    Dec 16, 2005 @ 12:00:31

    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.

    Reply

  70. kevin_mic
    Dec 16, 2005 @ 12:13:54

    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.


    function findHandle(item) {
    var children = item.getElementsByTagName("div");
    for( var i = 0; i &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') >= 0 )
    return child;
    }
    return item;
    }

    Reply

  71. atomix
    Dec 20, 2005 @ 13:17:01

    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

    Reply

  72. scanetuk
    Jan 08, 2006 @ 08:57:33

    Hi,

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

    Cheers

    Reply

  73. badsegue
    Jan 25, 2006 @ 13:19:20

    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

    Reply

  74. badsegue
    Jan 25, 2006 @ 13:21:09

    Trying again…

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

    instead of

    for (i in group._transforms)

    Reply

  75. dave_bevan
    Jan 26, 2006 @ 11:38:01

    **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

    Reply

  76. dave_bevan
    Jan 26, 2006 @ 11:40:02

    **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 ‘my_new_li_item_id’ otherwise it won’t work!

    Comments here would be welcome.

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

    Reply

    • Smalis
      Mar 29, 2011 @ 05:21:05

      Hallo … great job!!!

      But because i am new in Js i would be grateful if somebody could tell me how to dynamically create a new slideshow list element..
      I am using this code … but it does not work !!

      var newLis=null;

      newLis = document.createElement(“LI”);
      newLis.setAttribute(“className”,”slide”);

      newLis.setAttribute(“id”,”li”+prior); ( prior is a counter )
      newLis.innerHTML =
      ” ”
      +” ”
      +””+prior+””
      +””

      document.getElementById(‘slideshow’).appendChild( newLis);

      dragsort.makeSortable(document.getElementById(“li”+prior))

      PSEASE HEEEELP! i think tha it must be very easy but i cannot se the solution

      Reply

    • Smalis
      Mar 29, 2011 @ 05:29:49

      Dave … i am using your code… but it does not seem to help… everey element i drag towards down is put at the end of the lisst… Also i cannod drag towars up.. my list is vertical..
      the code i use is the foollowing … i would be grateful for any ideas…

      var newLis=null;

      newLis = document.createElement(“LI”);
      newLis.setAttribute(“className”,”slide”);

      newLis.setAttribute(“id”,”li”+prior); ( prior is a counter )
      newLis.innerHTML =
      ” ”
      +” <img src='uploadedFiles//chop”+name+”‘/>”
      +””+prior+””
      +””

      document.getElementById(‘slideshow’).appendChild( newLis);

      dragsort.addSortableItem(document.getElementById(“slideshow”), document.getElementById(“li”+prior) );

      Reply

  77. tsramkumar
    Jan 27, 2006 @ 17:09:17

    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!

    Reply

  78. tsramkumar
    Jan 31, 2006 @ 13:20:13

    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

    Reply

  79. lucatoldo
    Feb 02, 2006 @ 06:49:13

    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

    Reply

  80. Henner
    Feb 15, 2006 @ 14:51:34

    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

    Reply

  81. utahgolfer
    Mar 17, 2006 @ 12:42:06

    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

    Reply

  82. b-low
    Mar 29, 2006 @ 13:27:29

    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?

    Reply

  83. atxatx
    Mar 31, 2006 @ 03:13:08

    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,

    Reply

  84. labradors
    Apr 06, 2006 @ 09:01:20

    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!

    Reply

  85. sputnik
    Apr 07, 2006 @ 19:08:13

    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!

    Reply

  86. Evon
    Apr 10, 2006 @ 12:18:33

    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)

    Reply

  87. Evon
    Apr 10, 2006 @ 12:55:17

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

    Reply

  88. fcavassini
    Apr 14, 2006 @ 21:04:11

    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

    Reply

  89. gcphost
    Apr 16, 2006 @ 20:49:48

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

    Seems no solution was really posted.

    Reply

  90. labradors
    Apr 17, 2006 @ 21:24:34

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

    Reply

  91. gcphost
    Apr 18, 2006 @ 20:37:38

    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”

    Reply

  92. Arpa
    Apr 19, 2006 @ 06:34:24

    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.

    Reply

  93. Chatter
    Apr 28, 2006 @ 13:43:18

    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?

    Reply

  94. dino
    May 05, 2006 @ 12:28:20

    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

    Reply

  95. canonman
    May 31, 2006 @ 11:46:57

    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.

    Reply

  96. adam
    Jun 12, 2006 @ 23:33:22

    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.

    Reply

  97. adam
    Jun 13, 2006 @ 01:35:13

    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

    Reply

  98. adam
    Jun 13, 2006 @ 17:41:06

    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

    Reply

  99. EXE.trim.ALL
    Jun 18, 2006 @ 12:45:02

    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!

    Reply

  100. EXE.trim.ALL
    Jun 18, 2006 @ 12:57:48

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

    Reply

  101. weiyuh.chang
    Jun 29, 2006 @ 14:02:46

    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.

    Reply

  102. augustd
    Jul 11, 2006 @ 20:06:26

    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”)

    Reply

  103. !teo
    Jul 17, 2006 @ 15:43:53

    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!

    Reply

  104. !teo
    Jul 17, 2006 @ 19:56:19

    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!

    Reply

  105. mdda123
    Jul 22, 2006 @ 10:54:07

    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 ).

    Reply

  106. Hideaway
    Sep 15, 2006 @ 16:44:50

    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

    Reply

  107. elguapo
    Sep 30, 2006 @ 05:52:14

    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?

    Reply

  108. elguapo
    Sep 30, 2006 @ 19:28:54

    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…

    Reply

  109. Martin
    Oct 02, 2006 @ 12:41:08

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

    
    
    
    
    Drag &amp; 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">» La RATP</a>
        					» SNCF - Transilien
        					» 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">» Histoire</a>
        					<a href="http://trains-idf.net/?cat=8" rel="nofollow">» Lignes</a>
        					<a href="http://trains-idf.net/?cat=9" rel="nofollow">» Mat&eacute;riels</a>
        					<a href="http://trains-idf.net/?cat=10" rel="nofollow">» 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">» Histoire</a>
        					<a href="http://trains-idf.net/?cat=13" rel="nofollow">» Lignes</a>
        					<a href="http://trains-idf.net/?p=7" rel="nofollow">» Mat&eacute;riels</a>
        					<a href="http://trains-idf.net/?cat=11" rel="nofollow">» 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">» Histoire</a>
        					<a href="http://trains-idf.net/?cat=16" rel="nofollow">» Lignes</a>
        					<a href="http://trains-idf.net/?cat=17" rel="nofollow">» Mat&eacute;riels</a>
        					<a href="http://trains-idf.net/?cat=18" rel="nofollow">» Extensions</a>
    
    
    
    
    
    
    
    
    

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

    Thanks !

    Reply

  110. fermdp
    Oct 04, 2006 @ 15:11:41

    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

    Reply

  111. falling
    Dec 20, 2006 @ 17:29:47

    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.

    Reply

  112. sqoo
    Jan 20, 2007 @ 17:06:04

    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

    Reply

  113. mark
    Jan 25, 2007 @ 17:12:16

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

    Reply

  114. pennstater
    Feb 07, 2007 @ 19:06:58

    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. :)

    Reply

  115. tsdragon
    Feb 15, 2007 @ 11:02:04

    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.

    Reply

  116. jriffel
    Feb 24, 2007 @ 13:40:22

    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.

    Reply

  117. allanjr
    Feb 24, 2007 @ 22:04:00

    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).

    Reply

  118. Bacteria Man
    Apr 01, 2007 @ 18:51:45

    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

    Reply

  119. vesoosev
    Apr 02, 2007 @ 03:25:25

    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?

    Reply

  120. Rodrigo
    Apr 03, 2007 @ 10:40:01

    @ 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

    Reply

  121. fsg
    Apr 16, 2007 @ 05:37:50

    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
    }

    Reply

  122. cameronmanderson
    Apr 26, 2007 @ 00:35:16

    For those of you getting the factory null error, most of this appears to be happening with nested LI’s, a fix therefore was applied to dragsort in the makeListSortable function.

    Find both instance of:
    var items = list.getElementsByTagName(“li”)

    Replace with
    if(list.children) {
    var items = list.childNodes;
    } else {
    var items = list.getElementsByTagName(“li”)
    }

    This fixes the IE problem that I (and appears others) were coming across.

    Reply

  123. maegawa
    May 23, 2007 @ 03:49:24

    I am japanes and then I can speak English very little.

    I tied “Drag & Drop Sortable Lists with JavaScript and CSS”.
    I think ” this component is Great! wonderful!”
    It save me from difficult work .
    but I have a problem.
    I must add item to List and delete item from list Dynamic.
    I tried bellow code , but it is no good.

    //add Element to ul
    function addLiElement(){
    var tgObj =document.getElementById(“ulidvalue”);
    var liItem = document.createElement(‘li’);
    liItem.setAttribute(“className”, “liclassvalue”);
    var str = document.createTextNode(“litextvalue”);
    liItem.appendChild(str);
    tgObj.appendChild(liItem);
    junkdrawer.restoreListOrder(“ulidvalue”);
    dragsort.makeListSortable(document.getElementById(“ulidvalue”),verticalO
    nly, saveOrder);
    }

    //on load function
    var junkdrawer = ToolMan.junkdrawer();
    var dragsort = ToolMan.dragsort();
    function() {
    junkdrawer.restoreListOrder(“ulidvalue”);
    dragsort.makeListSortable(document.getElementById(“ulidvalue”),verticalO
    nly, saveOrder);
    }

    if you know any solution to this problem then tell me it.

    I’m sorry to trouble you.

    Reply

  124. anzer
    Jun 06, 2007 @ 13:44:30

    Any solution for “factory is null or not an object” bug?

    Reply

  125. anzer
    Jun 06, 2007 @ 13:59:43

    To fix the “Factory is null or not an object” bug I have just put a try.. catch block in line 180 of drag.js.. Its working fine.. Didn’t test too much though

    
    _dragEnd : function(event) {
            event = ToolMan.events().fix(event)
            var group = this.toolManDragGroup
            try //Anz
            {
                var dragEvent = group.factory._createEvent('dragend', event, group)
    .
    .
    .
            }
            catch(e)
            {
                //document.write(e.message + "")
            }
    
    

    Reply

  126. maphew
    Jun 06, 2007 @ 19:45:09

    I’ve recently implemented your wonderful scripts in a shopping cart. You can reorder the line items in your cart by dragging. As with most shopping carts each line item row has a form text field for changing the quantity of the item. The whole row moves when it is dragged. In FireFox 2.0, this quantity text box is visible but no longer accessible. I can’t bring focus to the text box to change the value in it.

    It seems okay in IE 6, since I can edit the value in the text box. I’m guessing this happens because of IE 6 bug where all form elements are placed above all other positioned layers, no matter what z-index is assigned to that layer.

    I’ve implemented the sethandle, non-editing, save list order version of your scripts.

    Is there any way to make the form element accessible in FireFox?

    I added a text box to your sample scripts in the edit-in-place example. I added the text box to the list 4 example with the handle and verified this problem on the example page too.

    Any help would be appreciated. I’m so close to getting this to work.

    Thanks, Matt

    Reply

  127. pelski
    Jun 10, 2007 @ 23:03:35

    Hi Jriffel,

    Thanks for the tip regarding the namespace conflicts between
    prototype.js and the tool-man library. A more robust fix that I
    came up, is to change the two usages in drag.js of
    (for i in XXX)
    to
    var i;
    for (i = 0; i < XXX.length; i++)

    By excluding all functions, I noticed that the dragdrop list no longer
    worked as it should, since the array contains events that are
    all functions.

    Reply

  128. bg
    Jun 27, 2007 @ 20:24:52

    Hi Tim,

    Thank you for a great script!

    Have a quick question about an issue I am encountering. In IE(6/7) if I have an image in the li, when I click on the image to drag it the image seems to get stuck to the cursor and then when I click again to drop it I get an js error “factory” is null or not an object.

    Any ideas you might have on this would be greatly appreciated.

    I appologize if you have already answered this, I downloaded the latest code today.

    Thanking you in advance.

    Reply

  129. vikki
    Aug 07, 2007 @ 10:17:16

    Hi Tim,

    WE are using your drag and drop code on a site we have built. It works GREAT, except when we moved from IIS5 to IIS6 and now we get a “Bad Request (Invalid Header Name)” using MAC Safari 2.0.3 to drag and drop images in a frame. The images move and drop fine but when you go to any other page or try to save the order of the images you just moved around (we built a button to save to our DB), you get the dreaded message. NO other pages will work after this.

    Can you shed any light on this? If we use FF on the MAC or IIS5 the site works perfectly.

    Thanks for any ideas. We’ve applied several Hot fixes and service packs to our IIS6 server to see if the issue would stop….nope.

    Vicky Chenn
    Channelready, Inc.

    Reply

  130. john_in_scotland
    Sep 11, 2007 @ 10:13:23

    Mr. Taylor,

    The tool-man library is blowing my mind, but I have a question: how do I turn it off?

    I’m working on a project where I want to be able to turn on or off the dragging functionality. My OOP JavaScript skills are not up to the task yet.

    Any suggestions?

    Cheers,
    John

    Reply

  131. cillroy
    Sep 14, 2007 @ 03:52:37

    Silly question – I love this script, but I want to use it programmatically. i.e. mouseover an image and a related gets moved to the top of the list.

    Any i crazy, or should i be able to do this with your code somehow?

    Reply

  132. cillroy
    Sep 17, 2007 @ 03:01:41

    so I have a question about using this script, is there a way to use it to move items by clicking a button? I would like to click a button and move the corresponding to the top of the list

    Reply

  133. emcarandang
    Nov 01, 2007 @ 14:41:32

    I made changes to your Drag and Drop functionalities by converting the containers from UL to DIV and LI to DIV (http://www.i-jascode.com/DragDrop/DragDrop.htm). I was too eager to use the same functionality to the widgets made by EXT in as much as the functionality is concerned but I got myself mixed-up when I need to place an “imprint” from the previous container before the draggable DIV leaves the container DIV and another “imprint” before I drop the draggable DIV to the next container DIV (please look at the portal app in EXT at http://extjs.com/deploy/dev/examples/portal/portal.html).
    Your help concerning this inquiry will be very much appreciated.

    Reply

  134. vagiclean
    Nov 05, 2007 @ 16:14:00

    i was wondering how would you make more than one paragraph editable. i’ve been trying for a while and i can’t figure it out.

    Reply

  135. mflo
    Nov 14, 2007 @ 16:38:03

    On Sept 15, 2005, a poster asked, “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!”

    I also am experiencing this ‘problem’ with radio buttons and check boxes. But only in IE. The radio buttons and check boxes retain their state under FireFox. Has a resolution to this issue been investigated (or better yet – found)?

    Here is a link to the implementation with which I’m having this issue:

    http://www.sapllc.com/toolmandhtml/examples/radiodragtest.html

    Tim – wonderful library. I really think it is one of the best open source tools I have run across. You are to be commended for making it available to us all.

    If any users of this fantastic tool have any ideas – I would appreciate your comments as well.

    Reply

  136. mflo
    Nov 14, 2007 @ 16:45:56

    On Sept 15, 2005, a poster wrote, “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!”

    Has anyone found a solution to this issue? I have experienced this loss of state for both check boxes and radio buttons. They lose their state when the list items containing these buttons/boxes are dragged.

    Here is a link to an example:

    http://www.sapllc.com/toolmandhtml/examples/radiodragtest.html

    This is a fantastic tool and I wanted to thank Tim for making it available. If any readers/users here have found the solution to this issue – I’d certainly appreciate it if you posted that solution here.

    Reply

  137. doronr
    Dec 05, 2007 @ 15:45:16

    Hi,

    I am using your darg & drop code on a site I build.
    My question is the following:
    I am tiring to have 2 dimensions lists.
    I want that the sort will work also inside elements in a row and between the rows.
    The following picture can demonstrate the issue-

    | List A |
    | _____<–>_____<–>_____<–>______ |
    | |A1| |A2| |A3| |A4| |
    |
    ____________________________________| ^
    |
    _________________________________________ |
    | List B | |
    | _____<–>_____<–>_____<–>______ | |
    | |B1| |B2| |B3| |B4| | |
    |
    ____________________________________| |
    |
    _________________________________________ |
    | List B | |
    | _____<–>_____<–>_____<–>______ | |
    | |C1| |C2| |C3| |C4| | v
    |
    ____________________________________|

    That’s mean that the sort will work between list A,B and C (they can switch places) and also inside each list (A1 can switch with A2 ,A3 and A4 and the same in list B,C).

    Can you please advice me with the code?

    Reply

  138. doronr
    Dec 06, 2007 @ 12:58:03

    Hi,

    The site was very helpful for me, but still I have a question for you.
    And I would be happy if you can advice me.
    My question is the following:
    I am tiring to have 2 dimensions lists.
    I want that the sort will work also inside elements in a row and between the rows.
    The following picture can demonstrate the issue-

    |List A |
    | ____ <–> ____ <—> ____ |
    | |A1| |A2| |A3| | ^
    |_________________________________| |
    |
    __________________________________ |
    |List B | |
    | ____ <–> ____ <—> ____ | |
    | |B1| |B2| |B3| | |
    |_________________________________| |
    |
    __________________________________ |
    |List C | |
    | ____ <–> ____ <—> ____ | |
    | |C1| |C2| |C3| | v
    |_________________________________|

    That’s mean that the sort will work between list A , B & C (they can switch places) and also
    inside each list (A1 can switch with A2 and A3 and the same in list B or C).
    Can you please advice me with the code?
    Thanks,
    Doron

    Reply

  139. utkuozan
    May 22, 2008 @ 03:07:46

    Hi Tim,
    First of all thank you very much for your code. It really helps very much when developing a project and it is both quite useful and handy to use. I really appreciate this work. Hope that you will continue on the project while growing the library contents.

    But while developing a project I ran into a problem which I failed to solve (I am not much of a JS guy here) and neede to ask you about it.

    In my page I am using Microsoft’s AJAX Extensions (ScriptManager & UpdatePanel). There are several controls at the top of the page to choose between different projects and their applications. When a spesific application is chosen I am filling the list-items as they are in yoru example in DataBound Repeaters. But the problem is that if I include the List-making repeaters inside the UpdatePanel afetr the first PostBack is committed I can not drag&drop the items in the lists. If I take them out of the UpdatePanel this time after changing the Application in a ListBox control my lists do not refresh (of course).

    IS there a possible way that I can provide the bıth functionality with your code in my project?

    Regards.

    Reply

  140. Samar
    May 30, 2008 @ 04:23:34

    How can I integrate this script with ajax?
    thank you!

    Reply

  141. XerxesDGreat
    Aug 07, 2008 @ 10:29:01

    Hey, great library.

    That’s it, just great library. No questions, no “great library, but…”, none of that. However, since I build websites freelance and this helps me immensely, I’ve sent you a little something through your “Donate via PayPal” link; get yourself a sixer or a movie!

    My two cents to people using this in a database situation: I’m using this library in photo album administration, similar to the reordering in Facebook photo albums. While I like the idea of updating via xmlhttp after each drag and drop, I prefer to do one update at the end of all the moving the old-fashioned way: clicking a button. In my mind,less traffic === less chance at a screw-up.

    To implement, I simply put the picture and a hidden input with the photo’s id number in a list element, pulling the image source and id from the database (the original photo order is saved in the database)

    This way, when the form is submitted, the pics[] name for each input creates an array within the post superglobal called $_POST[‘pics’] which you can access using a foreach loop.

    Just thought I’d contribute something!

    Reply

  142. shalinjshah
    Nov 09, 2008 @ 13:09:59

    Hi, is there a way to implement dragging and dropping feature using buttons? Like we can put up and down arrows to let users do move of block by just clicking button.

    I would appreciate if someone can help figuring out this feature with use of library. I think its very good library that some one can use for doing sorting.

    Reply

  143. Dev02
    Nov 12, 2008 @ 08:36:28

    Very usefull lib!

    Please, a need an upgrade that can block the drag option. There’s a way to delete the event associated to the lib, to free every tag from dragging? i have tried this:

    ToolMan.events().unregister(group.handle, ‘mousedown’, group._dragInit)

    but do not work!! Where is the error?

    Very please, give me an hand to resolve this nasty bug. There no built-in function to stop all!!!

    Reply

  144. bgordon
    Mar 26, 2009 @ 15:08:18

    Are you planning to update your scripts to make them work with IE8? They don’t seem to now… -bg

    Reply

  145. Tom
    Apr 15, 2009 @ 10:33:21

    Hi ToolMan,

    i’m using your library for quite some time and it works great. As i use it on an IE-only intranet site, i thought that i wouldn’t encounter compatibility problems at all, but when testing it with the new IE8, it didn’t work properly.

    After picking up an element, it wasn’t possible to get rid of it/drop it at another place.

    The JS-debugger said that the problem was in line 122 in drag.js and i figured that the “originalZIndex” variable was undefined.

    It is defined in line 116:

    var originalZIndex = ToolMan.css().readStyle(this.element, “z-index”)

    After changing “z-index” to “zIndex”, it works in IE8, too.

    Thanks for the nice library!

    Reply

  146. benow
    Jun 16, 2009 @ 01:18:35

    var coordinates = ToolMan.coordinates()
    var dragsort = ToolMan.dragsort()
    var target;
    var start;
    var end;

    window.onload = function() {
      var list=document.getElementById("list1");
      dragsort.makeListSortable(list,initDrag);
      ToolMan.events().register(list, 'mousedown', function(event) { target=event.target; });
    }
    
    function initDrag(item) {
      var group=item.toolManDragGroup;
      group.verticalOnly();
      group.register('dragstart',dragstart);
      group.register('dragend',dragend);
    }
    
    function dragstart(event) {
      from=indexOf(target.innerHTML,'list1');
    }
    
    function dragend(event) {
      to=indexOf(target.innerHTML,'list1');
      debug('moved '+target.innerHTML+' from: '+(from+1)+' to: '+(to+1));
    }
    
    function indexOf(toFind,groupid) {
      var ul=document.getElementById(groupid);
      var lis=ul.getElementsByTagName('li');
      for (var i=0;i&lt;lis.length;i++) {
        var curr=lis[i];
        if (curr.innerHTML==toFind) {
          return i;
        }
      }
      return -1;
    }
    

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Archives

Follow

Get every new post delivered to your Inbox.