Drag & drop between lists

15 Apr 2005 57 Comments

by Tim Taylor in Entries Tags: CSS, DHTML

Ben Levy sent me this demonstration of drag & drop between lists:

I don’t know if you are interested, but I was playing with one of your examples of the drag and drop sortable lists and made some changes to allow dragging between multiple lists. I don’t really know how useful that would be, but it seems to work for the most part.

I think it’s pretty damn useful. I especially like that he highlights the drop targets.

57 Comments (+add yours?)

JLS
May 12, 2005 @ 11:03:07

This is EXTREMELY useful! Common use for this: a user updates a selection of items in his profile (e.g., a selection of zip codes that should be included in a report).

Any chance of obtaining your code?

Thanks.

Reply
Tim Taylor
May 12, 2005 @ 14:33:18

JLS,

My [examples and code][1] are available here: [http://tool-man.org/examples/][1].

The example of dragging *between* two lists was a modification [Ben Levy][2] made to version 0.1 of my libarary. You will need to ask him for that code.

Dragging between lists is a planned enhancement for my library.

[1]: http://tool-man.org/examples/
[2]: http://neb.net

Reply
markireland
Jun 05, 2005 @ 21:14:44

I have had a shot at a page that lets the user change a page that is coming out of a database.

http://www.csseditor.com/dragdrop1.html

It is destined to be part of the realSimpleCMS

Anyone interested in contributng to this over at sourceForge?

Reply
markireland
Jun 06, 2005 @ 23:29:17

I notice if I try hard enough I can completely lose the item I was dragging.

Any ideas for a workaround?

Reply
Tim Taylor
Jun 15, 2005 @ 09:26:17

Mark, I need a bit more information to go on if you want some help debugging your problem. Browser version and how to reproduce the problem would help.

Reply
markireland
Jun 20, 2005 @ 23:47:39

I am using IE 6 This happens with my demo page at http://www.csseditor.com/dragdrop1.html

If I grab something and drag it off screen (so no landing is highlighted)
then the thing I dragged dissappears.

BTW have you seen http://www.piczo.com It has a pagebuilder drag and drop editor.

Reply
markireland
Jun 25, 2005 @ 05:26:47

I think if the item I drag is too wide the ‘dropzone’ is never there so
the item is lost.

http://www.realsimplecms.com/temp/index.html

Also if the dragable item only contains links and images as links the
drag-cursor never appears.

Reply
dlpmaster
Jul 11, 2005 @ 12:33:59

Well, with every demo you guys have posted here.. if you Drag the Table to a blank spot anywhere on the page, the draged item desapears once you drop it.
Anyone fixed this yet? And well ok.. whats the point of having it to drag and drop, if you can’t save it to your database.. or something..
Any updates ..

Reply
TomDummy
Jul 13, 2005 @ 19:48:05

I made a version that saves the the items from vanishing by adding them to a “trash” list, it also saves the structure via php / mysql so its persistent.
Check it out here http://www.cyberdummy.co.uk/2005/07/13/multi-list-drag-and-drop/

Reply
bambambhole
Aug 29, 2005 @ 10:49:00

I got this fixed..

>Well, with every demo you guys have posted here.. if you Drag the Table to a blank spot
> anywhere on the page, the draged item desapears once you drop it.
>Anyone fixed this yet? And well ok.. whats the point of having it to drag and drop,
>if you can’t save it to your database.. or something..
>Any updates ..

But then there is a problem, when I move the mouse and added a scrolling functionality, the image, does not get stuck to the mouse, as in the aphabetical sorter, can u tell me the difference for the same.

Reply
babailiica
Aug 31, 2005 @ 03:31:47

I have created a script a year ago, which reorders a list:
[Reorder multiple fields in web page](http://www.codeproject.com/jscript/iliasorter.asp)

I think it may be useful for some one. I use it in my CMS development. It includes serverside example in PHP and/or ASP.

There is also some good ideas such:
auto alphabetical and numerical ascending and descending order
viceversa order

Reply
kronqvist83
Sep 10, 2005 @ 16:49:43

This script is awesome, but if i let go of an item and it outside all containers, can anyone give me a hint to make it appear last in the left container?

Reply
egypt123
Oct 12, 2005 @ 15:53:35

What would be cool is if you could select multiple items (ala, the Windows Shift or Crtl
keys) and drag them to the other list. Has anyone figured out this sort of functionality?

Reply
bambambhole
Oct 17, 2005 @ 03:47:55

>Drag & drop between lists
>Posted by Tim Taylor on April 15th 2005 to DHTML & CSS
>Ben Levy sent me this demonstration of drag & drop between lists:

>>I don’t know if you are interested, but I was playing with one of your examples of the drag and >>drop sortable lists and made some changes to allow dragging between multiple lists. I don’t >>really know how useful that would be, but it seems to work for the most part.

>I think it’s pretty damn useful. I especially like that he highlights the drop targets.

Do we have this achived with the new library ??

Reply
nebulous
Nov 30, 2005 @ 05:15:18

Hi – I’m using this to popular acclaim on my site. Thanks for writing it – looks very swish. Problem is, if I load up two lists of very different length and scroll to the bottom of one so that the whole of the other disappears off the top of the screen, there’s no way to drag an item from the long list back up to the short one. Can you think of a way I could add some code to maybe enable the page’s scrolling mechanism when the drag starts (like when you drag across text to select it) so that moving to the top of the screen with the dragged item would let me scroll back up to the shorter list?

Reply
nGenuitySolutions
Dec 14, 2005 @ 00:36:54

For those who can’t figure out the dissapearing leafs.

This is a linked list so we just need to keep track of the original node.

firstContainer : null,
lastContainer : null,
currContainer : null,

Reply
nGenuitySolutions
Dec 14, 2005 @ 00:40:52

the editor ate my response!

declaration – add a variable for the current leaf
var DragDrop = {
firstContainer : null,
lastContainer : null,
currContainer : null, // added

onDragStart – Keep track of the current leaf

// item starts out over current parent
this.parentNode.onDragOver();
DragDrop.currContainer = this.parentNode; // added

onDragEnd – replace the isOutside check with this

if (this.isOutside) {
var tempParent = this.parentNode;
this.parentNode.removeChild( this );
tempParent.parentNode.removeChild( tempParent );

this.isOutside = false;
DragDrop.currContainer.appendChild( this );
}

Reply
Andrew
Feb 12, 2006 @ 01:21:17

I’m probably fishing here, but has anyone figured out a way to implement drag and dropping between two lists, one being the multicolumn, multirow list, and another being a single column list?

Reply
digitalpacman
May 09, 2006 @ 11:10:41

Hello. I was wondering if you would be interested in working with me in order to enhance your software to add the functionality to be able to drag items into sub categories. I’ve been working on it, it seems tough, and am seeking assistance. What I mean is instead of inserting before or after, you’d be inserting inside a new element. For the most part I have alot of it down, but its extremely buggy.

Let me know if you’re interested. I’m posting this where ever I can find an input box so you can see it.

Reply
Bunsen
May 14, 2006 @ 16:13:20

Excellent code. I’ve used your sortable lists to produce questions (well, one so far) based on a scrambled list of operations. The unscrambled list is compared with the correct order and marked out of 10: see http://myweb.tiscali.co.uk/microelectronics/pcbDnD1.htm
I’d like to have an array of photos and a separate list of captions to go with them, which have to be correctly sequenced and matched. I could do it as 2 separate lists, but would like the photos to be in a table form with a cell underneath to take the caption from the list. The caption would need to snap into the cell. I’ll have to understand the ideas behind DnD better before I can do that.

Reply
Bunsen
May 20, 2006 @ 05:20:26

Have now got DnD from table cells into other table cell which can be checked and marked. Page layout now stays static, well fairly.

Reply
_Sam_
Jun 02, 2006 @ 20:49:36

If you call DragDrop.makeListContainer on a list that’s already a list container, you’ll end up with lots of errors (the list gets added to the linked list multiple times and you can have a circular list).

To fix it, before adding a list to the linked list first search the linked list for it:

makeListContainer : function(list) {
// each container becomes a linked list node
if (this.firstContainer == null) {
this.firstContainer = this.lastContainer = list;
list.previousContainer = null;
list.nextContainer = null;
} else {

// if the list is already in the linked list, don’t add it again, SAM
var container = this.firstContainer;
var loopCount = 0;
while (container != null && container != list && loopCount++

Reply
twenger26
Jun 06, 2006 @ 13:31:24

I was just wondering if anyone has figured out how to make the page scroll up or down when an item is dragged. A couple of my lists are longer than the page and it doesn’t scroll when dragged. Any help would be much appreciated.

Reply
Thomas Frank
Jun 21, 2006 @ 04:18:14

Impressive stuff!

Going to try it right away for a Intranet application where you book resources for different exhibitions.

Reply
torp
Jul 05, 2006 @ 10:52:04

@twenger26: Auto-scroll: take a look at my page. There are 2 versions, one for Tim’s script, and one for Tom’s.

Reply
jaybhatto
Jul 08, 2006 @ 12:11:45

hi torp – where is your page? I could not find a link to it? I am looking for a way to auto scroll as well.

thanks

Reply
torp
Jul 09, 2006 @ 04:28:43

Ehm where has this link gone???? Anyway, it’s http://www.torporama.com/dragdrop/

Reply
gf
Jul 09, 2006 @ 17:36:17

Hi torp

Any idea how to “submit” so that the data can be “stored” and added to a database. And here I am thinking og Toms script.

what i want to know is how can i get out the names to store in a DB?

Peter
Allan
Joan

Regards GF

Reply
torp
Jul 10, 2006 @ 05:43:28

Hi, some weeks ago Peter Rehm posted a solution using Sajax on Tom Westcott’s scripts, in Tom’s blog. Unfortunately that blog is down now. Here is a [link](http://peter-rehm.de/2006/06/20/multi-list-drag-drop-sajax/) to Peter’s website. Click on ‘Beispielseite’ for a working demo.

Reply
partyboy
Jul 13, 2006 @ 10:21:32

Hi, I would like to keep data on the left list.

Example : when I click an element on the left list, the element keep in the list an a copy is draggable on the other list.

How can I do that ?

Thanks

Reply
inderpal
Aug 02, 2006 @ 02:00:25

Hi All,

The script is working great. I was working on to make the copy/clone of item while draggig from one of the list. I would appreciate if somebody give me any pointers/directions to make it work.

Thanks in advance!!

Best Regards,
Inderpal Singh

Reply
dna1
Aug 23, 2006 @ 10:26:27

These are very useful scripts, and I am sure will find a significant place in the new web functionality. I have been searching for this type of dragging for really long time.

What I just want to ask you: is there a way to limit the number of the element s in the second list (sajax2) and to order it horizontally, with size of the list items 100x100px?

Many thanx in advance! Dna, quebec

Reply
Jakkz
Oct 26, 2006 @ 08:17:54

Really great script – Impressive and very useful! Saves me alot of time!!! Thanks!!!

Reply
Trackback: Australian job
rlankhorst
Feb 18, 2007 @ 09:20:19

I’ve been working with the drag & drop code, which is the best I found sofar. The problem I tried to tackle is that if you nest the lists, you can’t drag in the sublist. You would want to drag a list including the sublist if you drag the parent, but if you drag one of the children you want this to drag separately. I found that if you add window.event.cancelBubble = “true”; to the end of the function ondragstart, it works more as you would expect it to (in IE anyway). The only problem i still have: you can drag a child one level up, and you can change the order, but you can’t drag a parent a level down.

Reply
chitgoks
Mar 29, 2007 @ 01:02:43

this is a great script guys. i was hoping that when items werent successfully dragged to the other side, the items wouldnt get lost. i am very interested in using th is

i plant to provide the user with a set of columns in the db table and he has the option to select which columns the report will contain. so he has to drag the columns that he wants to appear in the report to the other side

Reply
chitgoks
Mar 29, 2007 @ 01:36:01

yeah this script is great. it’s not heavy too. would be nice if that item lost (when it’s out of bounds not being dragged to its destination bug) gets fixed

Reply
mtoynbee
Oct 01, 2007 @ 03:38:44

Having a problem which I think can be solved by the above script by Sam – but the script looks incomplete.

Does anyone have the full function?

Any help, much appreciated.

Reply
mtoynbee
Oct 01, 2007 @ 04:03:08

Can anyone help find the rest of the script by Sam – I think it will solve my problem…?

Reply
Pryde
Jun 13, 2008 @ 16:48:06

Can anyone suggest a site that has a lot of ASP.NET dropdown components and such to view? I am developing a new production music library site and want to see the latest options for consideration.

R. Hughes
http://www.productionmusiclibrary.com
Production Music Library – Urban Dropz

Reply
lkellogg
Oct 14, 2008 @ 08:33:05
I think I fixed the disappearing image problem. Here is the code I changed on dragdrop.js:
onDragEnd : function(nwPosition, sePosition, nwOffset, seOffset) {
// if the drag ends and we’re still outside all containers
// it’s time to remove ourselves from the document
if (this.isOutside) {
var tempParent = this.parentNode;
this.parentNode.removeChild( this );
tempParent.parentNode.removeChild( tempParent );
```
        // added code to fix disappearing images
        // it now adds the image to the bottom of first list
        var container = DragDrop.firstContainer;
        container.onDragOver();
        this.isOutside = false;
        container.appendChild( this );
        this.style["top"] = "0px";
        this.style["left"] = "0px";
        // end fix

        return;
    }
    this.parentNode.onDragOut();
    this.style["top"] = "0px";
    this.style["left"] = "0px";
}
};
```
Reply
- doogieadams
  Sep 22, 2011 @ 03:54:55
  
  Used your addition but now I cannot move from first list to second list, any ideas?
  
  Reply
Clarke Web Designs
Nov 30, 2008 @ 00:46:22

The benefits of tim’s drag and drop lists are fair-to-good cross browser support, concise packaging, and (with the link at the top to Ben Levy’s page), drag and drop between multiple lists.

The benefits of techniques found on david walsh’s page (links) are ajax / database support and (IMPORTANTLY) the use of the alt attribute when serializing the list in order to pass the parameters / values somewhere else.

link: http://davidwalsh.name/mootools-drag-drop
ajax example: http://davidwalsh.name/dw-content/sort-save.php

Reply
mcm
May 18, 2009 @ 02:27:19

Found the current version of DragSort no longer works with IE8. So as a result I wrote my own version based on jQuery, and added the ability to drag between lists. For those interested you can obtain it here:
http://dragsort.codeplex.com/

Thanks tool-man for your version though, I’ve been using it for the last couple of years.

Reply
Houlie
Jul 07, 2009 @ 10:36:27

I see lots of people having problems with this scrip on IE8 (even Bebo by the looks of it), so heres how to fix…..
Replace the onTopWhileDragging function
with this (the check for “undefined” is what I’ve added)
onTopWhileDragging: function(z) {
var zIndex = typeof (z) != “undefined” ? z : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, “z-index”);
if (typeof (originalZIndex) == “undefined”)
originalZIndex = ToolMan.css().readStyle(this.element, “zIndex”);
this.register(‘dragstart’, function(e) { e.group.element.style.zIndex = zIndex; });
this.register(‘dragend’, function(e) { e.group.element.style.zIndex = originalZIndex;});
},

Reply
hz
Jul 29, 2009 @ 18:57:37

Thanks Houlie for the fix for IE8, but it does not work for me. When I copy it and paste it in it disables dragging in both IE and Firefox. Since it works for you, something must be getting lost in the translation.

The new line
if (typeof (originalZIndex) == “undefined”) originalZIndex = ToolMan.css().readStyle(this.element, “zIndex”);

is what seems to be causing the problem.

Do you have a page I can visit to see it? If so, I should be able to copy it.

I’d really like to be able to continue to use tool-man’s dragging. I have an application that generates code to use it.

Thanks for any help you can give.

Hank

Reply
Ashwini
Aug 07, 2009 @ 13:19:38

Hi Ben,
Can you please send me the code for drag and drop between lists?
I am trying to do the same what you did in this example”http://neb.net/playground/dragdrop/”

Thanks in adavance,
Ashwini

Reply
abhishek.namdeo
Oct 30, 2009 @ 00:36:27

I am not able to see download link for this example. Can anyone help me to get the code and js files of this example.

Reply
suji
Oct 30, 2009 @ 14:18:53

Hi Ben,
Can you please send me the code for drag and drop between lists?
I am trying to do someting similar to what u have in :
http://neb.net/playground/dragdrop/

Thanks a lot ,
Suji

Reply
jylyn
Nov 15, 2009 @ 21:54:03

Thanks a million Houlie, I really wasn’t in the mood to try and figure that out when I discovered it didn’t work in ie8!

For anyone who can’t get Houlie’s code to work, try deleting and re-typing the quote marks (” and ‘) in your script. The formatting on this page seems to have messed them up.

Reply

ockels
Jun 28, 2010 @ 13:44:02

Thanks Houlie, You saved me a lot of time when i found out that dragsort.js produced an error in Internet Explorer 8.

For easy copy pasting the modified source with fix for IE8 from drag.js


/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

ToolMan._dragFactory = {
    createSimpleGroup : function(element, handle) {
        handle = handle ? handle : element
        var group = this.createGroup(element)
        group.setHandle(handle)
        group.transparentDrag()
        group.onTopWhileDragging()
        return group
    },

    createGroup : function(element) {
        var group = new _ToolManDragGroup(this, element)

        var position = ToolMan.css().readStyle(element, 'position')
        if (position == 'static') {
            element.style["position"] = 'relative'
        } else if (position == 'absolute') {
            /* for Safari 1.2 */
            ToolMan.coordinates().topLeftOffset(element).reposition(element)
        }

        // TODO: only if ToolMan.isDebugging()
        group.register('draginit', this._showDragEventStatus)
        group.register('dragmove', this._showDragEventStatus)
        group.register('dragend', this._showDragEventStatus)

        return group
    },

    _showDragEventStatus : function(dragEvent) {
        window.status = dragEvent.toString()
    },

    constraints : function() {
        return this._constraintFactory
    },

    _createEvent : function(type, event, group) {
        return new _ToolManDragEvent(type, event, group)
    }
}

function _ToolManDragGroup(factory, element) {
    this.factory = factory
    this.element = element
    this._handle = null
    this._thresholdDistance = 0
    this._transforms = new Array()
    // TODO: refactor into a helper object, move into events.js
    this._listeners = new Array()
    this._listeners['draginit'] = new Array()
    this._listeners['dragstart'] = new Array()
    this._listeners['dragmove'] = new Array()
    this._listeners['dragend'] = new Array()
}

_ToolManDragGroup.prototype = {
    /*
     * TODO:
     *   - unregister(type, func)
     *   - move custom event listener stuff into Event library
     *   - keyboard nudging of "selected" group
     */

    setHandle : function(handle) {
        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)
    },

    register : function(type, func) {
        this._listeners[type].push(func)
    },

    addTransform : function(transformFunc) {
        this._transforms.push(transformFunc)
    },

    verticalOnly : function() {
        this.addTransform(this.factory.constraints().vertical())
    },

    horizontalOnly : function() {
        this.addTransform(this.factory.constraints().horizontal())
    },

    setThreshold : function(thresholdDistance) {
        this._thresholdDistance = thresholdDistance
    },

    transparentDrag : function(opacity) {
        var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
        var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")

        this.register('dragstart', function(dragEvent) {
            var element = dragEvent.group.element
            element.style.opacity = opacity
            element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'
        })
        this.register('dragend', function(dragEvent) {
            var element = dragEvent.group.element
            element.style.opacity = originalOpacity
            element.style.filter = 'alpha(opacity=100)'
        })
    },

    onTopWhileDragging: function(z) {

        // IE8 Modifications by Houlie

        var zIndex = typeof (z) != "undefined" ? z : 100000;
        var originalZIndex = ToolMan.css().readStyle(this.element, "z-index");
        if (typeof (originalZIndex) == "undefined") originalZIndex = ToolMan.css().readStyle(this.element, "zIndex");
        this.register('dragstart', function(e) { e.group.element.style.zIndex = zIndex; });
        this.register('dragend', function(e) { e.group.element.style.zIndex = originalZIndex;});
    },
    _dragInit : function(event) {
        event = ToolMan.events().fix(event)
        var group = document.toolManDragGroup = this.toolManDragGroup
        var dragEvent = group.factory._createEvent('draginit', event, group)

        group._isThresholdExceeded = false
        group._initialMouseOffset = dragEvent.mouseOffset
        group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
        ToolMan.events().register(document, 'mousemove', group._drag)
        document.onmousemove = function() { return false }
        ToolMan.events().register(document, 'mouseup', group._dragEnd)

        group._notifyListeners(dragEvent)
    },

    _drag : function(event) {
        event = ToolMan.events().fix(event)
        var coordinates = ToolMan.coordinates()
        var group = this.toolManDragGroup
        if (!group) return
        var dragEvent = group.factory._createEvent('dragmove', event, group)

        var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)

        // TODO: replace with DragThreshold object
        if (!group._isThresholdExceeded) {
            var distance =
                    dragEvent.mouseOffset.distance(group._initialMouseOffset)
            if (distance

starlover84
Oct 08, 2010 @ 09:48:35

Hi there,

I need some help please?
I am using http://tool-man.org/examples/sorting.html
example sorting in two dimensions to sort my list of images and works fine, but my list of images gets very long, so what i try to do is create a floating div on the right side of my page with a list in it. So i can drag images from my main image list to a temporary box.
Now i scroll down to the place where i want my images and drag them from the floating div (temp box) back into the main list. This way i don’t have to scroll all the way up and down for each image.
I tried to combine the sorting in two dimensions example with the http://neb.net/playground/dragdrop/ drag and drop between two lists example.

My problem is i don’t understand the code enough so i can implement/join both examples.
So, please, is there anyone who would like to help me with this? I can provide code for the floating div.
Perhaps we could create a nice example for long sorting lists.

Greets, Starlover

Reply
laurent
Apr 27, 2011 @ 10:25:08

Thanks to: Houlie, ockels aaaaand Tim ♥

Reply
Ricardo
Oct 04, 2011 @ 15:47:17

I have integrated this with Django. Has anyone figured out a way to update the Django models (tables). I would like to save the order and update the sequence field in the table.

Reply
Abhishek Patel
Oct 11, 2011 @ 02:23:26

Hi

This is Great Code. I have used in my application and it is working fine… I found solutoins of IE7 so thought my be that will help you…

Here is the code …

onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != “undefined” ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, “z-index”)

this.register(‘dragstart’, function(dragEvent)
{
dragEvent.group.element.style.zIndex = zIndex
})
this.register(‘dragend’, function(dragEvent)
{
var ua = navigator.userAgent;
var MSIEOffset = ua.indexOf(“MSIE “);

if (MSIEOffset == -1)
{

}
else
{
if (parseFloat(ua.substring(MSIEOffset + 5,ua.indexOf(“;”, MSIEOffset))) == 8)
{
dragEvent.group.element.style.zIndex = “auto”;
}
else if (parseFloat(ua.substring(MSIEOffset + 5,ua.indexOf(“;”, MSIEOffset))) == 7)
{
//dragEvent.group.element.style.zIndex = originalZIndex;
}
}
})
},

Now this will work for IE * and IE 7

Thanks to All,
-Abhishek Patel

Reply
Vaughn
Oct 27, 2011 @ 22:20:18

Anyone have an idea of how to swap the elements instead of moving and sorting?

Reply
jack
Jan 02, 2012 @ 23:38:32

hey can anyone tell me how to add cookies to this so the two lists are saved, even after the cross listing has occurred.

Reply