list drag and drop sortable

[Jeff]

Somewhere I've seen a list that is drag and drop sortable, where you
can "grab" a list item and move it up or down the list.

Can someone summarize how this is done. I really don't want to hack
my way through something like scriptaculous.

Jeff

[Peter Michaux]

On Aug 16, 4:35*pm, Jeff <jeff@spam_me_not.comwrote:

* *Somewhere I've seen a list that is drag and drop sortable, where you
can "grab" a list item and move it up or down the list.

* *Can someone summarize how this is done. I really don't want to hack
my way through something like scriptaculous.

1) mousedown event
determine the target element in list
record mouse position
2) mousemove event
determine relative position of mouse to starting position on
mousedown
move the target element visually (position:relative helps)
3) mouseup event
move the element in the DOM to its new position in the list

Peter

[Jeff]

Peter Michaux wrote:

On Aug 16, 4:35 pm, Jeff <jeff@spam_me_not.comwrote:

> Somewhere I've seen a list that is drag and drop sortable, where you
can "grab" a list item and move it up or down the list.

Can someone summarize how this is done. I really don't want to hack
my way through something like scriptaculous.

1) mousedown event
determine the target element in list
record mouse position
2) mousemove event
determine relative position of mouse to starting position on
mousedown
move the target element visually (position:relative helps)

I'm having trouble here:

simplified example

document.onmousedown=mouseDown;

function mouseDown(e){
e = e || window.event;
target=e.target || e.srcElement;

if(target.nodeName == 'LI'){
target.position = 'relative';
target.style.top = '400px';
// li does not move
}

Yet, this "works":

<li style="position: relative;top: 400px">this is offset</li>

What have I missed? Doctype is strict.

Jeff

3) mouseup event
move the element in the DOM to its new position in the list

>
Peter

[Jeff]

Jeff wrote:

Peter Michaux wrote:

>On Aug 16, 4:35 pm, Jeff <jeff@spam_me_not.comwrote:

>> Somewhere I've seen a list that is drag and drop sortable, where you
can "grab" a list item and move it up or down the list.

Can someone summarize how this is done. I really don't want to hack
my way through something like scriptaculous.

1) mousedown event
determine the target element in list
record mouse position
2) mousemove event
determine relative position of mouse to starting position on
mousedown
move the target element visually (position:relative helps)

I'm having trouble here:

simplified example

document.onmousedown=mouseDown;

function mouseDown(e){
e = e || window.event;
target=e.target || e.srcElement;

if(target.nodeName == 'LI'){
target.position = 'relative';
target.style.top = '400px';
// li does not move
}

Yet, this "works":

<li style="position: relative;top: 400px">this is offset</li>

What have I missed? Doctype is strict.

I've solved that by defining the position: relative in the CSS first.

How do I move a node from one place to another?

I'm pretty close as I've written an array of siblings with their y
positions, now I just need to move the node.

Jeff

>
Jeff

>3) mouseup event
move the element in the DOM to its new position in the list

>>
Peter

[Peter Michaux]

On Aug 17, 10:53*am, Jeff <jeff@spam_me_not.comwrote:

Jeff wrote:

Peter Michaux wrote:

On Aug 16, 4:35 pm, Jeff <jeff@spam_me_not.comwrote:
* *Somewhere I've seen a list that is drag and drop sortable, where you
can "grab" a list item and move it up or down the list.

>* *Can someone summarize how this is done. I really don't want tohack
my way through something like scriptaculous.

1) mousedown event
* * *determine the target element in list
* * *record mouse position
2) mousemove event
* * *determine relative position of mouse to starting position on
mousedown
* * *move the target element visually (position:relative helps)

I'm having trouble here:

simplified example

document.onmousedown=mouseDown;

function mouseDown(e){
* * e = e || window.event;
* * target=e.target || e.srcElement;

if(target.nodeName == 'LI'){
* * target.position = 'relative';
* * target.style.top = '400px';
// li does not move
}

Yet, this "works":

<li style="position: relative;top: 400px">this is offset</li>

What have I missed? Doctype is strict.

* *I've solved that by defining the position: relative in the CSS first.

* *How do I move a node from one place to another?

http://developer.mozilla.org/en/docs...t.insertBefore

Note with insertBefore you can insert at the end of the list as
discussed on that page using null.

Peter