Bug Tracker

Ticket #965 (closed bug: wontfix)

Opened 2 years ago

Last modified 2 months ago

Interface-Draggable breaks inputs

Reported by: michal.aichinger@… Assigned to: stefan
Type: bug Priority: major
Milestone: 1.1.3 Component: interface
Version: Keywords:
Cc: Needs: Review

Description (last modified by scott.gonzal) (diff)

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

Change History

in reply to: ↑ description   Changed 2 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>

follow-up: ↓ 3   Changed 1 year 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

in reply to: ↑ 2   Changed 1 year 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

follow-up: ↓ 6   Changed 1 year ago by Cheez

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

  Changed 10 months ago by scott.gonzal

  • need set to Review
  • status changed from new to closed
  • resolution set to wontfix
  • description changed from 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> to 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>

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

in reply to: ↑ 4 ; follow-up: ↓ 7   Changed 6 months 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.

in reply to: ↑ 6   Changed 6 months 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.