473,765 Members | 1,909 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

[scriptaculous] dragging and <input> field

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

Nov 25 '05 #1
5 2258
> 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
Nov 25 '05 #2
On 2005-11-25, Bart van Deenen <bv******@xs-four-all.nl.invalid> wrote:
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?


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

Bye.
Jasen
Nov 26 '05 #3
Jasen Betts <ja***@free.net .nospam.nz> wrote:
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
Nov 28 '05 #4
On 2005-11-28, Bart van Deenen <bv******@xs-four-all.nl.invalid> wrote:
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.


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

Bye.
Jasen
Dec 1 '05 #5
Jasen Betts <ja***@free.net .nospam.nz> wrote:
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
Dec 2 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1719
by: Don | last post by:
Can't figure this one out. The "validate" function below checks to make sure the field "names" is not null. "validate" actually calls "isEmpty", which scans the field. Here's the situation. <input> for "names" first existed in an html file. The test worked just fine there. If the field was filled, the test would pass. If the field was cleared after having been filled, it would fail as it should. The field is then passed, via POST,...
5
13124
by: Jonathan Daggar | last post by:
Hello, I'm trying to put together a form with a very tight table formatting. However, every time I put an text-type input field in, the browser pads the area to the right of it with space. I've tried to eliminate it several ways, but it won't go away. It looks like it's forcing at least one space (line break?) in after each field, and then there's some mystery padding on the right that also refuses to go away. I've put up a demo of...
1
2485
by: Felipe Gasper | last post by:
Does anyone have thoughts on whether the text-transform attribute of input tags should apply to the displayed text in the browser? It's not *enclosed*, which I think is what the CSS2 spec refers to, and KHTML doesn't do this, but Gecko and IE both do. An example may be found at http://fshn3152.foods.uiuc.edu/~fgasper/test.php If you look at this page in IE or a Gecko-based browser, the input field's text will be in allcaps, but in...
3
13155
by: TR | last post by:
Is it possible with CSS to prevent this wrapping alignment with a checkbox with a nested label? This is the label of the checkbox that wraps beneath it I'd prefer it looked like this, with a flush left margin:
3
12936
by: Ben | last post by:
Here's my form: <form name="aForm" method='post'> <input type=file name=file1 onkeypress='KeyPress()'><br> <a id='attachMoreLink' href='javascript:AddFileInput()">Attach More Files </a> <input type=submit value='Done'> </form>
2
5329
by: Mara Guida | last post by:
Hi, After I've populated a page with some <INPUT ...> elements I'd like to have access to whatever is written there. The best I've done (which does not work) is: ================ // ==UserScript== // @name AddInput
4
18435
by: Rick | last post by:
I'm trying to make an input tag visible or hidden based on the value of another input tag, so that when the 1st input tag is changed in anyway, the 2nd input tag will become visible. Thanks in advance, Rick
2
3385
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given field(s). The popping-up seems to work just fine; it's the tearing down that's giving me grief. If I stick a onmouseout event on the same input field that caused the onmouseover/pop-up, it starts to flicker 'cos the <divis placed for esthetically...
8
3626
by: Zhang Weiwu | last post by:
hello. Is it possible to design CSS in the way that content in <inputare not visible in print out (a.k.a. value of <inputnot visible) while the border remain visible? trial: input { border: thin solid black;
0
9566
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9393
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10153
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10007
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9946
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9832
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7371
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6646
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3921
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.