No Possibility to Select Text Inside <Input> When Parent Is Draggable

No possibility to select text inside input when parent is draggable

This was reported as a bug a few months back and is currently being considered for a future release.

One of the hold-ups is that we are unable to determine the impact of the issue. I recall searching online and on GitHub for sites that relied on this pattern, but largely came up empty-handed. If you happen to know of any sites that use this, and are therefore broken in Internet Explorer 10 and 11, I would be happy to update the internal issue and request immediate action.

That being said, it does appear you can select text if you tab focus to the element itself, and then utilize the arrow and shift keys to perform your selection. You can also right-click the input control, which also places a cursor that you can then manipulate with your keyboard. It's not ideal, but it may suffice until we can resolve this from the browser-end.

Allow select text on a HTML 5 draggable child element

One way to make that work, is to actually check which element fired the event, e.target, against the element that has the listener attach to itself, #draggable (in this case using this).

if (e.target === this) {...}

This will allow default behavior on element positioned inside the draggable element, such as selecting a text and so on.

Note, since Firefox has issue with draggable="true", I used a different drag method.

Stack snippet

(function (elem2drag) {
  var x_pos = 0, y_pos = 0, x_elem = 0, y_elem = 0;  
  
  document.querySelector('#draggable').addEventListener('mousemove', function(e) {
    x_pos = e.pageX;
    y_pos = e.pageY;
    if (elem2drag !== null) {
        elem2drag.style.left = (x_pos - x_elem) + 'px';
        elem2drag.style.top = (y_pos - y_elem) + 'px';
    }  
  })

  document.querySelector('#draggable').addEventListener('mousedown', function(e) {
    if (e.target === this) {
      elem2drag = this;
      x_elem = x_pos - elem2drag.offsetLeft;
      y_elem = y_pos - elem2drag.offsetTop;
      return false;
    }  
  })
  
  document.querySelector('#draggable').addEventListener('mouseup', function(e) {
    elem2drag = null;
  })
})(null);

#draggable {
  display: inline-block;
  background: lightgray;
  padding:15px;
  cursor:move;
  position:relative;
}
span {
  background: white;
  line-height: 25px;
  cursor:auto;  
}

<div id="draggable">
  <span>Select me as text will work<br>when the mouse is over the text</span>
</div>

Javascript - Select Tag not working inside Draggable Parent

Your issue lies here:

function dragMouseDown(w) {
  w = w || window.event;
  w.preventDefault();
  pos3 = w.clientX;
  pos4 = w.clientY;
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
}

Where you preventing the default action so remove w.preventDefault(); (This tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be) and you will be fine.

function dragMouseDown(w) {
  w = w || window.event;
  pos3 = w.clientX;
  pos4 = w.clientY;
  document.onmouseup = closeDragElement;
  document.onmousemove = elementDrag;
}

How to trigger parent drag event when child is dragged in jQuery?

This guy here has a solution to your problem. https://stackoverflow.com/a/18819346

You can not use text area as draggable because it is restricted. In the jQuery API it is noted that 'it prevents dragging starting on "input,textarea,button,select,option" elements. '. Having said that, if there is a way to modify this functionality then I am not aware of it.

Cannot click on input fields in draggable modal

Fixed it by using

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

and

$(".tukibox").draggable();

jquery native libraries always beat the custom ones!

---

Related Topics