#4945 closed bug (notabug)

Opened November 08, 2009 06:42AM UTC

Closed November 17, 2009 09:34AM UTC

Last modified October 11, 2012 09:15PM UTC

Jquery draggable makes input text fields uneditable (swallows onfocus)

Reported by: mmakundi Owned by:
Priority: blocker Milestone:
Component: ui.draggable Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

Hi!

I have written code (below) to be able to drag an input field onto another, but it seems that draggable swallos input[text].onfocus.

This results in the problem, that all draggable input fields act as disabled (firefox) and clicking the mouse does not focus them. I can edit the input field if I focus on them using the TAB key, but I have to traverse all the necessary tab-indexes.

So it seems draggable swallos the input[text].onfocus mouse event.

Is there a way to workaround this during bind-time?

		<head>
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/jquery-ui.js"></script>
		<script type="text/javascript">
		$(document).ready( function() 
		{
		  $("#drag-table tr td input").draggable({helper: 'clone', revert: 'invalid', cancel: null, cursor: 'move', addClasses: false, containment: $("#drag-table"), handle: 'h2', opacity: 0.8, scroll: true });
		  $("#drag-table tr td input").droppable({
		    addClasses: false,
		    drop: function(ev, ui) {
		      alert('value='+ ui.draggable.val() + ", text=" + ui.draggable.text() + " and deeper=" + ui.draggable[0].value);
		      $(this).insertAtCaret(ui.draggable.val());
		      ui.draggable.val(null);
		      $(this).trigger('change');
		    }
		  });
		});
		
		$.fn.insertAtCaret = function (myValue) {
		  return this.each(function(){
		      //IE support
		      if (document.selection) {
		          this.focus();
		          sel = document.selection.createRange();
		          sel.text = myValue;
		          this.focus();
		      }
		      //MOZILLA / NETSCAPE support
		      else if (this.selectionStart || this.selectionStart == '0') {
		          var startPos = this.selectionStart;
		          var endPos = this.selectionEnd;
		          var scrollTop = this.scrollTop;
		          this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
		          this.focus();
		          this.selectionStart = startPos + myValue.length;
		          this.selectionEnd = startPos + myValue.length;
		          this.scrollTop = scrollTop;
		      } else {
		          this.value += myValue;
		          this.focus();
		      }
		  });
		};
		</script>
		</head>
		<body>
		
		<table border="1" cellspacing="10" cellpadding="10" id="drag-table">
		<tr>
		<td><input type="text" name="1x1y" id="id1x1y" value="text" onfocus="alert('onfocus swallowed?');"/></td> 
		<td><input type="text" name="2x1y" id="id2x1y" onchange="alert('hello');"/></td> 
		</tr>
		<tr>
		<td><input type="text" name="1x2y" id="id1x2y" value="next"/></td> 
		<td><input type="text" name="2x2y" id="id2x2y"/></td> 
		</tr>
		</table>
		
		</body>
Attachments (0)
Change History (2)

Changed November 17, 2009 09:34AM UTC by jzaefferer comment:1

resolution: → invalid
status: new → closed

In order to drag elements without activating the native text selection, Draggable disables the textselection by default, which also affects the input elements. You need use the handle-option to specify an element to use for dragging, then only that gets its text-selection disabled.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted