Glisser-déposer désactive le champ de texte d'entrée! Aidez moi?

Question

J'ai un champ de texte d'entrée dans un conteneur. Ce conteneur est déplaçable, mais maintenant je ne peux plus entrer de texte dans le champ de texte. Probablement parce que vous devez cliquer à l'intérieur du champ de texte pour taper, et maintenant la souris vers le bas signifie faire glisser!

Ou peut-être est quelque chose complètement différent

Est-ce que quelqu'un sait comment je peux résoudre ce problème? Merci à l'avance

vous pouvez vérifier le code ici, mais son à peu près .. http://www.jsfiddle.net/AVG5a/

Answer 1

Utilisez jQuery^[docs] et jQuery UI^[docs]. J'ai presque fini de convertir en jQuery, je posterai un lien jsFiddle quand je le terminerai.

Ici, vous allez: http://jsfiddle.net/pswRh/

Après avoir appris jQuery et jQuery UI, il est très facile de faire un élément draggable, et - le cas échéant - désactiver le faisant glisser avec un élément enfant spécifié.

HTML

<div id='myDiv'> 
    <img src='http://dummyimage.com/100x100.png' id='pic' /> 
    <input id='textInput' /> 
</div> 

CSS (en option)

#myDiv { 
    width: 150px; 
    height: 200px; 
    border: 1px solid; 
    background: blue; 
    color: white; 
} 

JavaScript

$('#myDiv').draggable({ 
    cancel: '#textInput' 
}); 

Et le tour est joué! Vous venez de créer un div draggable, mais vous pouvez toujours taper dans le champ de saisie, car il ne fera pas glisser l'élément.

Vous pouvez également spécifier un handle. De cette façon, vous pouvez seulement faire glisser la div avec l'enfant spécifié.

HTML, CSS

même que précédemment

JavaScript

$('#myDiv').draggable({ 
    handle: '#pic' 
}); 

spécifier plusieurs éléments séparés par une virgule (à savoir '#el1, #el2, #el3').

Answer 2

Ajouter à ce appendFunction:

document.getElementById("inputId0").addEventListener("mousedown", function(e) { 
    e.stopPropagation(); 
}, false); 

Ceci annulera mousedown événements pour l'élément avec id inputId0.