Skip to main content

Bug Tracker

Side navigation

#965 closed bug (wontfix)

Opened February 15, 2007 03:34PM UTC

Closed March 31, 2008 01:29AM UTC

Last modified March 15, 2012 05:02PM UTC

Interface-Draggable breaks inputs

Reported by: michal.aichinger@gma Owned by: stefan
Priority: major Milestone: 1.1.3
Component: interface Version:
Keywords: Cc:
Blocked by: Blocking:
Description

When I try use Draggable on this div, it broke a city input. I cannot click into it to place there text cursor. When the div is not draggable it work fine.

<div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; ">

<input class="bor" value="Close" onclick="closeForm('xxx', '')" type="button">

<fieldset>

<div class="formLine"><label for="pusobnost_region">Region: </label> <select id="region" name="_region" class="bor">

<option title="xxx" value="7">xxx</option>

<option title="zzz" value="8">zzz</option>

</select></div>

<div class="formLine"><label for="city">City: </label> <input class="bor" id="city" style="position: relative; z-index: 20;" type="text"></div>

<div class="formLine"><input id="addFOAFormButton" class="bor" value="Add" onclick="add('xxx')" type="button"></div>

</fieldset>

</div>

Attachments (0)
Change History (7)

Changed April 10, 2007 03:04AM UTC by shenanime comment:1

Here's a workaround to try. However, in IE, you can focus your input fields but you can't select them. Hope this helps

jQuery

$('#form').Draggable({

handle : 'drag_handle' //add this line

});

HTML

<div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; ">

<div class="drag_handle">[Drag Me!]</div> <!-- This line is added -->

<div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; ">

<input class="bor" value="Close" onclick="closeForm('xxx', )" type="button"> <fieldset>

<div class="formLine"><label for="pusobnost_region">Region: </label> <select id="region" name="_region" class="bor">

<option title="xxx" value="7">xxx</option> <option title="zzz" value="8">zzz</option> </select></div> <div class="formLine"><label for="city">City: </label> <input class="bor" id="city" style="position: relative; z-index: 20;" type="text"></div>

<div class="formLine"><input id="addFOAFormButton" class="bor" value="Add" onclick="add('xxx')" type="button"></div>

</fieldset>

</div>

Replying to [ticket:965 michal.aichinger@gmail.com]:

When I try use Draggable on this div, it broke a city input. I cannot click into it to place there text cursor. When the div is not draggable it work fine. <div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; "> <input class="bor" value="Close" onclick="closeForm('xxx', '')" type="button"> <fieldset> <div class="formLine"><label for="pusobnost_region">Region: </label> <select id="region" name="_region" class="bor"> <option title="xxx" value="7">xxx</option> <option title="zzz" value="8">zzz</option> </select></div> <div class="formLine"><label for="city">City: </label> <input class="bor" id="city" style="position: relative; z-index: 20;" type="text"></div> <div class="formLine"><input id="addFOAFormButton" class="bor" value="Add" onclick="add('xxx')" type="button"></div> </fieldset> </div>

Changed August 29, 2007 09:46PM UTC by kalperin comment:2

i was able to hack idrag.js to work around this issue. Add a few lines to the "draginit" method like so:

draginit : function (e)
{
	var targetName=e.target?e.target.nodeName:e.srcElement.nodeName //add
	if (targetName.toLowerCase() == 'input') { //these
		return true; //four
	} //lines

and voila! Now my input fields are editable again. What we're doing here is propagating the original event without doing any of the drag mojo. This lets the browser handle the event in the best way it knows how (namely, but putting the cursor in the text input field).

cheers,

Keith

Changed September 06, 2007 11:49AM UTC by Cheez comment:3

This is good, although the contents of the select can't be selected. I've done a partial workaround by adding code to select it, as in:

<input type="text" onfocus="this.select();" />

The biggest problem with the whole thing is that it means you've got to use the uncompressed version of interface, I'm only using the dependencies of the sortables, but that alone is twice the size of jQuery itself. I can't repack it because it throws errors about missing ; (I've not missed any out when adding those 4 lines)

Chris

Replying to [comment:2 kalperin]:

i was able to hack idrag.js to work around this issue. Add a few lines to the "draginit" method like so:
> draginit : function (e)
> {
> 	var targetName=e.target?e.target.nodeName:e.srcElement.nodeName //add
> 	if (targetName.toLowerCase() == 'input') { //these
> 		return true; //four
> 	} //lines
> 
> 
and voila! Now my input fields are editable again. What we're doing here is propagating the original event without doing any of the drag mojo. This lets the browser handle the event in the best way it knows how (namely, but putting the cursor in the text input field). cheers, Keith

Changed September 06, 2007 11:50AM UTC by Cheez comment:4

correction, contents of the input can't be selected. Not contents of the select.

Changed March 31, 2008 01:29AM UTC by scott.gonzal comment:5

description: When I try use Draggable on this div, it broke a city input. I cannot click into it to place there text cursor. When the div is not draggable it work fine. \ \ \ \ <div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; ">\ \ <input class="bor" value="Close" onclick="closeForm('xxx', '')" type="button">\ <fieldset>\ <div class="formLine"><label for="pusobnost_region">Region: </label> <select id="region" name="_region" class="bor">\ <option title="xxx" value="7">xxx</option>\ <option title="zzz" value="8">zzz</option>\ </select></div>\ <div class="formLine"><label for="city">City: </label> <input class="bor" id="city" style="position: relative; z-index: 20;" type="text"></div>\ <div class="formLine"><input id="addFOAFormButton" class="bor" value="Add" onclick="add('xxx')" type="button"></div>\ </fieldset>\ </div>When I try use Draggable on this div, it broke a city input. I cannot click into it to place there text cursor. When the div is not draggable it work fine. \ \ \ \ <div id="form" style="border: 1px solid black; background: lightblue none repeat scroll 0%; display: block; position: absolute; "> \ \ <input class="bor" value="Close" onclick="closeForm('xxx', '')" type="button"> \ <fieldset> \ <div class="formLine"><label for="pusobnost_region">Region: </label> <select id="region" name="_region" class="bor"> \ <option title="xxx" value="7">xxx</option> \ <option title="zzz" value="8">zzz</option> \ </select></div> \ <div class="formLine"><label for="city">City: </label> <input class="bor" id="city" style="position: relative; z-index: 20;" type="text"></div> \ <div class="formLine"><input id="addFOAFormButton" class="bor" value="Add" onclick="add('xxx')" type="button"></div> \ </fieldset> \ </div>
need: → Review
resolution: → wontfix
status: newclosed

Interface is no longer supported; consider switching to jQuery UI.

Changed July 15, 2008 10:01AM UTC by emccolgan comment:6

Replying to [comment:4 Cheez]:

correction, contents of the input can't be selected. Not contents of the select.

The problem is caused by the following lines in the "build" method of idrag.js

	if (window.ActiveXObject) {
		this.onselectstart = function(){return false;};
		this.ondragstart = function(){return false;};
	}

Remove these lines and the problem goes away! I have not noticed any side effects of removing this.

Changed July 15, 2008 10:21AM UTC by emccolgan comment:7

Alternatively, change the the onselectstart and ondragstart object to the drag handle element. This should prevent selecting the text only in the drag handle.

Change:

	if (window.ActiveXObject) {
		this.onselectstart = function(){return false;};
		this.ondragstart = function(){return false;};
	}

To:

	if (window.ActiveXObject) {
		dhe.onselectstart = function(){return false;};
		dhe.ondragstart = function(){return false;};
	}

Remember to move this to after the declaration of the "dhe" variable.