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]

Re: list drag and drop sortable

On Aug 16, 4:35 pm, Jeff <jeff@spam_me_n ot.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:relat ive helps)
3) mouseup event
move the element in the DOM to its new position in the list

Peter

[Jeff]

Re: list drag and drop sortable

Peter Michaux wrote:

On Aug 16, 4:35 pm, Jeff <jeff@spam_me_n ot.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:relat ive helps)

I'm having trouble here:

simplified example

document.onmous edown=mouseDown ;

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

if(target.nodeN ame == 'LI'){
target.position = 'relative';
target.style.to p = '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]

Re: list drag and drop sortable

Jeff wrote:

Peter Michaux wrote:

>On Aug 16, 4:35 pm, Jeff <jeff@spam_me_n ot.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:relat ive helps)

>
I'm having trouble here:
>
simplified example
>
document.onmous edown=mouseDown ;
>
function mouseDown(e){
e = e || window.event;
target=e.target || e.srcElement;
>
if(target.nodeN ame == 'LI'){
target.position = 'relative';
target.style.to p = '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]

Re: list drag and drop sortable

On Aug 17, 10:53 am, Jeff <jeff@spam_me_n ot.comwrote:

Jeff wrote:

Peter Michaux wrote:

On Aug 16, 4:35 pm, Jeff <jeff@spam_me_n ot.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:relat ive helps)

>

I'm having trouble here:

>

simplified example

>

document.onmous edown=mouseDown ;

>

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

>

if(target.nodeN ame == 'LI'){
    target.position = 'relative';
    target.style.to p = '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/DOM:element.insertBefore

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

Peter