Interface-Draggable breaks inputs

[[email protected]…]

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>

[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 [email protected]:

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>

[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

[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

[Cheez]

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

[scott.gonzal]

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

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

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