Drag & Drop deaktiviert Eingabetextfeld! Hilf mir?

Question

Ich habe ein Eingabefeld in einem Container. Dieser Container ist ziehbar, aber jetzt kann ich keinen Text mehr in das Textfeld eingeben. Wahrscheinlich, weil Sie in das Textfeld klicken müssen, um zu schreiben, und jetzt Maus bedeutet ziehen!

Oder vielleicht seine etwas komplett anders

Wer weiß, wie ich dieses Problem lösen kann? Vielen Dank im Voraus

können Sie den Code aus hier überprüfen, aber es ist ziemlich viel .. http://www.jsfiddle.net/AVG5a/

Answer 1

Verwenden jQuery^[docs] und jQuery UI^[docs]. Ich bin fast fertig mit der Konvertierung in jQuery, ich werde einen jsFiddle Link posten, wenn ich fertig bin.

Hier gehen Sie: http://jsfiddle.net/pswRh/

Nachdem Sie jQuery und jQuery UI lernen, dann ist es sehr einfach, ein Element ziehbar zu machen, und - optional - deaktivieren Sie es mit einem bestimmten Kind-Element ziehen.

HTML

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

CSS (optional)

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

JavaScript

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

Und voila! Sie haben gerade ein ziehbares div erstellt, aber Sie können immer noch das Eingabefeld eingeben, da das Element nicht gezogen wird.

Alternativ können Sie ein Handle angeben. Auf diese Weise können Sie das div nur mit dem angegebenen untergeordneten Element ziehen.

HTML, CSS

gleiche wie vorhergehende

JavaScript

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

mehrere Elemente durch ein Komma getrennt angeben (d.h. '#el1, #el2, #el3').

Answer 2

Fügen Sie diese auf appendFunction:

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

Diese mousedown Ereignisse für das Element mit der ID stornieren inputId0.