By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,036 Members | 978 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,036 IT Pros & Developers. It's quick & easy.

list drag and drop sortable

P: n/a
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
Aug 16 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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
Aug 17 '08 #2

P: n/a
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
Aug 17 '08 #3

P: n/a
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
Aug 17 '08 #4

P: n/a
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
Aug 17 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.