#965 closed bug (wontfix)
Interface-Draggable breaks inputs
Reported by: | Owned by: | stefan | |
---|---|---|---|
Priority: | major | Milestone: | 1.1.3 |
Component: | interface | Version: | |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description (last modified by )
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 Changed 16 years ago by
comment:2 follow-up: 3 Changed 16 years ago by
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 Changed 16 years ago by
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 } //linesand 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 follow-up: 6 Changed 16 years ago by
correction, contents of the input can't be selected. Not contents of the select.
comment:5 Changed 15 years ago by
Description: | modified (diff) |
---|---|
need: | → Review |
Resolution: | → wontfix |
Status: | new → closed |
Interface is no longer supported; consider switching to jQuery UI.
comment:6 follow-up: 7 Changed 15 years ago by
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 Changed 15 years ago by
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.
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({
});
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; ">
<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>
</fieldset> </div>
Replying to [email protected]: