Bug Tracker

Opened 13 years ago

Closed 12 years ago

Last modified 8 years ago

#965 closed bug (wontfix)

Interface-Draggable breaks inputs

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

Description (last modified by scott.gonzal)

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>

Change History (7)

comment:1 in reply to:  description Changed 13 years ago by shenanime

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 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>

comment:2 Changed 13 years ago by 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

comment:3 in reply to:  2 Changed 13 years ago by Cheez

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 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

comment:4 Changed 13 years ago by Cheez

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

comment:5 Changed 12 years ago by scott.gonzal

Description: modified (diff)
need: Review
Resolution: wontfix
Status: newclosed

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

comment:6 in reply to:  4 ; Changed 12 years ago by emccolgan

Replying to 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.

comment:7 in reply to:  6 Changed 12 years ago by emccolgan

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.

Note: See TracTickets for help on using tickets.