Drag N Drop and Input fields

[Stern]

If the draggable contains a form input (like a text field), there's
some odd behavior. In Firefox, it can be clicked on with the mouse,
but the cursor is invisible. In Firefox and IE, if there is text in
the field, the text can be selected via keyboard shortcuts, but of
course, not with the usual mouse drag and select.

[Peter Michaux]

Do you have a url of a very small test page that displays this behavior?

Peter

[Stern]

Not at this time, but if you take the page at http://forkjavascript.com/drag/simple
and add a basic form like so:

<div class="draggable" id="apple_1" style="top:10px;left:
14px;position:relative;">
<FORM NAME="testform" ACTION="#"><INPUT TYPE="text" NAME="test"
SIZE=7><INPUT TYPE=SUBMIT VALUE="Submit"></FORM>
</div>

Then on Firefox 1.5, it doesn't accept any input (although you can use
the Tab key to get into the field)

If I edit DragManager.js to:
// prevent text selection in Firefox 2 & perhaps other browsers
if(e.target && e.target.tagName=="INPUT"){}
else{FORK.Event.preventDefault(e);}

Then it seems to work normally in Firefox 1.5.

Do you get the same on your end?

[Stern]

P.S. I just found that the missing/invisible cursor had to do with a
Firefox quirk involving input fields and overflow style, as per
http://www.activewidgets.com/javascript.forum.13884.4/input-fields-dont-display-the.html

[Peter Michaux]

Hi,

On 3/5/07, Stern <ster...@hotmail.com> wrote:
>
>

> Not at this time, but if you take the page at http://forkjavascript.com/drag/simple
> and add a basic form like so:
>
> <div class="draggable" id="apple_1" style="top:10px;left:
> 14px;position:relative;">
> <FORM NAME="testform" ACTION="#"><INPUT TYPE="text" NAME="test"
> SIZE=7><INPUT TYPE=SUBMIT VALUE="Submit"></FORM>
> </div>
>
> Then on Firefox 1.5, it doesn't accept any input (although you can use
> the Tab key to get into the field)
>
> If I edit DragManager.js to:
> // prevent text selection in Firefox 2 & perhaps other browsers
> if(e.target && e.target.tagName=="INPUT"){}
> else{FORK.Event.preventDefault(e);}
>
> Then it seems to work normally in Firefox 1.5.
>
> Do you get the same on your end?

Yes I do and it is easy to get the behavior you want. It isn't related
to a browser bug or a Fork bug. It was a Fork design decision that I
think maybe should change. Here is the story...

In the DragManager.js file you will see the following code

isInvalidHandle: function(element) {
return (element.tagName && element.tagName.toLowerCase() === 'a')
? true : false;
},

The above code makes it so that any element will act like a drag
handle except for anchor elements. It doesn't really make sense that a
text area or button etc should act like a drag handle. So one solution
is to override this function by adding the following to your page so
that input, textarea, button and select elements are not drag handles
by default.

FORK.Drag.DragManager.prototype.isInvalidHandle = function(element) {
return (element.tagName &&
element.tagName.toLowerCase().match(/^(a|input|textarea|select|button)$/))
? true : false;
};

There are other ways to achieve your desired behavior but I think the
above will be the cleanest. I also think this should probably be the
code that is included in Fork.

Please let me know if this solves your problem. It works for me.

As extra tid bits of info. If you want to change the behavior of
something in Fork it is better to override the piece of code after the
Fork file loads rather than editing the Fork files. This means if Fork
is reinstalled then you don't loose your changes.

For your HTML you might want to start validating it. Lower case
attributes names and quoted values are the way to go.

<div class="draggable" id="apple_1"
style="top:10px;left:14px;position:relative;">

<form name="testform" action="#" class=>
<input type="text" name="test" size="7">
<input type="submit" value="Submit">
</form>
</div>

Peter

[Stern]

> Please let me know if this solves your problem. It works for me.

Works wonderfully, thank you!