OT (sorta): DHTML drag-drop sorting interface

gogo · 2005-05-27 14:23:50

This isn't immediatly related to Xinha (but might be in V2 for sorting toolbar groups), I'm looking for an example of a DHTML (Javascript) interface for sorting a list of items by dragging an item and dropping it into another position in the list.

Has anybody seen anything like that? The only dragging stuff I can seem to find is for dragging layers around to arbitrary positions, rather than dragging static page elements into alternate locations.

Yermo · 2005-05-27 16:08:16

gogo wrote:

This isn't immediatly related to Xinha (but might be in V2 for sorting toolbar groups), I'm looking for an example of a DHTML (Javascript) interface for sorting a list of items by dragging an item and dropping it into another position in the list.
Has anybody seen anything like that? The only dragging stuff I can seem to find is for dragging layers around to arbitrary positions, rather than dragging static page elements into alternate locations.

I have a complete implementation that I put together a while ago that I can give you. I just need to package it up for you. I call it draglist.

gogo · 2005-05-27 16:11:56

you da man yermo

Yermo · 2005-05-27 16:17:51

gogo wrote:

you da man yermo

I'm going to put up a sample of what it does so you can look at it. Am packaging it up right now.

Yermo · 2005-05-27 17:14:18

gogo wrote:

you da man yermo

Ok, I've ripped the code out of formVista and packaged it up well enough that it runs outside of the framework.

Let me know if this is what you were looking for:

http://www.formvista.com/uploaded_html/demos/draglist

Each item in the list is a <div> that is given a unique id which was to be an integer. The values are the order. On submit the new order of the items in the list is queried and the value fields are updated before submission.

If this is what you're looking for I'll package up a download for you. It's been quite a while since I've looked at this code.

niko · 2005-05-28 01:18:52

wow, nice script!
what licence is it?

Yermo · 2005-05-28 02:17:06

niko wrote:

wow, nice script!
what licence is it?

Something essentially free. Creative Commons Attribution sound good? The underlying dom-drag library uses that license which I think states that you just have to give me/my company some credit in the headers and you cant' claim you wrote it but otherwise are free to do with it what you want.

I'll package it up as a download once I get a chance. Maybe tomorrow.

Foxx · 2005-05-28 04:26:57

nice script, maybe you could add some lines somewhere stating that as soon as you click on an item, it is put on top, now if you select the first item, you drag it behind the other items. besides that, very nice!

gogo · 2005-05-28 09:30:29

Looks nice, not quite what I was looking for but I might be able to do a bit of hacking to it . For reording Xinha toolbars though it looks like just the thing (cept we will be using it horizontally )

Yermo · 2005-05-28 13:28:25

gogo wrote:

Looks nice, not quite what I was looking for but I might be able to do a bit of hacking to it . For reording Xinha toolbars though it looks like just the thing (cept we will be using it horizontally )

The underlying dom-drag.js file:

http://youngpup.net/2001/domdrag

provides a nice interface to drag and drop. The draglist.js file itself is based on work from:

http://blog.simon-cozens.org/6785.html

I'm packaging up what I have and will make a post once it's avialable.

Yermo · 2005-05-28 14:56:08

gogo wrote:

Looks nice, not quite what I was looking for but I might be able to do a bit of hacking to it . For reording Xinha toolbars though it looks like just the thing (cept we will be using it horizontally )

Ok. I've packaged what I have. It's now available for download at:

http://www.formvista.com/otherprojects/draglist.html

If you use it please let me know what you think and any suggestions on improvements. The code leaves a bit to be desired.

mtmosier · 2005-05-29 20:14:10

Very nice, thanks for this.

Modified draglist.js to work horizontally.
http://office.astrolabe.com/demo/dragli … raglist.js

Here's the diff.
http://office.astrolabe.com/demo/dragli … list.patch

Last edited by mtmosier (2005-05-29 20:14:41)

guillaumed · 2005-05-30 10:15:20

Great result..
Good idea to raise this thread..

kimss · 2005-05-31 11:08:59

Hey Yermo, great work. Ive been looking for such an example myself several times and this hit the spot. Last time I saw a drag'n'drop which accually works was in the Statistics software Livestats, which has a similar feature.

Thumbs up for this one,

Yermo · 2005-05-31 14:02:58

kimss wrote:

Hey Yermo, great work. Ive been looking for such an example myself several times and this hit the spot. Last time I saw a drag'n'drop which accually works was in the Statistics software Livestats, which has a similar feature.
Thumbs up for this one,

Cool. Thanks. I had been planning to release this for quite some time (over a year now). The request from Gogo just pushed me enough to get it done.

I want to find the time to do what I call "draggrid". Same idea, except along the lines of a grid or photogallery. It's a bit more tricky to do.

-- Yermoi

Yermo · 2005-05-31 14:04:47

If you have any questions, comments or patches about draglist please post them to the formvista forum at

http://www.formvista.com/forum.html

It'll make it alot easier on me to keep track of things.

Thanks!

-- Yermo

kimss · 2005-05-31 18:56:03

draggrid sounds very usefull, ill check in by your forum. im testing the psp browserhack now, so typing is kinda timeconcuming, but cool,

Xinha Discussion Forum

Announcement

#1 2005-05-27 14:23:50

OT (sorta): DHTML drag-drop sorting interface

#2 2005-05-27 16:08:16

Re: OT (sorta): DHTML drag-drop sorting interface

#3 2005-05-27 16:11:56

Re: OT (sorta): DHTML drag-drop sorting interface

#4 2005-05-27 16:17:51

Re: OT (sorta): DHTML drag-drop sorting interface

#5 2005-05-27 17:14:18

Re: OT (sorta): DHTML drag-drop sorting interface

#6 2005-05-28 01:18:52

Re: OT (sorta): DHTML drag-drop sorting interface

#7 2005-05-28 02:17:06

Re: OT (sorta): DHTML drag-drop sorting interface

#8 2005-05-28 04:26:57

Re: OT (sorta): DHTML drag-drop sorting interface

#9 2005-05-28 09:30:29

Re: OT (sorta): DHTML drag-drop sorting interface

#10 2005-05-28 13:28:25

Re: OT (sorta): DHTML drag-drop sorting interface

#11 2005-05-28 14:56:08

Re: OT (sorta): DHTML drag-drop sorting interface

#12 2005-05-29 20:14:10

Re: OT (sorta): DHTML drag-drop sorting interface

#13 2005-05-30 10:15:20

Re: OT (sorta): DHTML drag-drop sorting interface

#14 2005-05-31 11:08:59

Re: OT (sorta): DHTML drag-drop sorting interface

#15 2005-05-31 14:02:58

Re: OT (sorta): DHTML drag-drop sorting interface

#16 2005-05-31 14:04:47

Re: OT (sorta): DHTML drag-drop sorting interface

#17 2005-05-31 18:56:03

Re: OT (sorta): DHTML drag-drop sorting interface

Board footer