HTML5 selezionare il testo in <input> con il mouse sul div trascinabile

Question

Nel seguente codice, vorrei essere in grado di selezionare il testo con il mouse senza spostare il div genitore. (Senza jQuery)

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

Answer 1

mio suggerimento, hanno un onblur e evento onfocus per l'elemento di input, che commuta attributo trascinabile dell'oggetto. Ecco il mio codice di prova che ha funzionato per 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> 

Con questa soluzione, la vostra div trascinabili dovrà essere più grande di ingresso, come ci deve essere un luogo che si può fare clic per trascinare mentre bluring l'ingresso. Anche se questo non dovrebbe nemmeno essere uno svantaggio, dal punto di vista UX vorrai almeno un'etichetta o un'icona o qualcosa su cui aggrapparti. Altrimenti dovresti iniziare a fare cose strane come "Se fai clic e tieni premuto per un secondo o più, intendi trascinare, altrimenti dovrai selezionare il testo". Quale, è fattibile da una vista di codice, ma probabilmente una scelta povera dell'interfaccia utente.