[scriptaculous] dragging and <input> field

[Bart van Deenen]

Hi all
I have a form with a couple of input fields, embedded within spans. I am
using script.aculo.us for dragging and dropping, and want to reorder the
input fields that way. The input fields are display:inline because I
want them all on the same line.

Does anyone know of a smart trick to be able to drag these input fields?
Just setting their disabled attribute doesn't work, because then they
get no events. Not setting disabled just causes the fields to show a
text cursor when you try to drag. I have a working solution with
absolutely positioned blocks on top of the inputs, that drag the fields
with them, but I find it quite ugly.

Anyone any better suggestions?

Thanks

Bart van Deenen

 

[Aaron Gray]

I have a form with a couple of input fields, embedded within spans. I am

using script.aculo.us for dragging and dropping, and want to reorder the
input fields that way. The input fields are display:inline because I
want them all on the same line.

Does anyone know of a smart trick to be able to drag these input fields?
Just setting their disabled attribute doesn't work, because then they
get no events. Not setting disabled just causes the fields to show a
text cursor when you try to drag. I have a working solution with
absolutely positioned blocks on top of the inputs, that drag the fields
with them, but I find it quite ugly.

Anyone any better suggestions?

You need to do for <span>'s what has been done for <div>'s with drag and
drop.

Aaron

 

[Bart van Deenen]

put them inside a div, the div will get events. , drag the div.

I tried it, but clicking inside the <input> element within the DIV will
still cause normal cursor handling for an input, it will not allow me to
drag the input field.
At the moment I'm just putting a padding around the input, so that you
can drag the span or div, but it would be nicer if one could drag the
whole input field around, instead of just its thick border.

Bart van Deenen

 

[Bart van Deenen]

Maybe you could put a transparent div over (Z-index) the input field, and
make the visible one follow the covering one...

That works, but it's inelegant. I just hoped one of you guys/gals would
think of something elegant.

Thanks for thinking with me.


Bart