HTML5 select text in <input> with mouse on draggable div

Question

In the code below, I would like to be able to select text with mouse whithout moving the parent div. (Without jQuery)

<div draggable="true">
    <input type="text" value="This is text to select">
</div>

Answer 1

My suggestion, have an onblur and onfocus event for the input element, which toggles the object's draggable attribute. Here's my test code that worked for me:

<style>
    #dragObject{background-color: grey; padding: 80px 20px; width: 175px;}
</style>

<div id="dragObject" draggable="true">
    <input type="text" value="This is text to select" onfocus="entering()" onblur="leaving()">
</div>

<script>
function entering(){
    document.getElementById('dragObject').setAttribute("draggable", "false");
}

function leaving(){
    document.getElementById('dragObject').setAttribute("draggable", "true");
}
</script>

With this solution, your draggable div will have to be larger than the input, as there must be a place you can click to drag while bluring the input. Though that shouldn't even be a downside, As from the UX point of view you would want at the minimum a label or icon or something to grab on to. Otherwise you'd have to start doing strange things like, "If you click and hold for a second or more, you're intending to drag, otherwise you're going to be selecting text". Which, is doable from a code view, but probably a poor user interface choice.