ドラッグアンドドロップで入力テキストフィールドが無効になります。助けて？

Question

私は、コンテナ内に入力テキストフィールドを持っています。 このコンテナはドラッグ可能ですが、今はテキストフィールドにテキストを入力できなくなりました。 おそらく入力するためにテキストフィールドの中をクリックしなければならないので、 と今すぐマウスをドラッグすることを意味します！

または多分何か完全に異なる

誰も私がこれを解決する方法を知っていますか？事前

で おかげで、あなたはここにコードを確認することができますが、そのほとんど.. http://www.jsfiddle.net/AVG5a/

Answer 1

使用jQuery^[docs]とjQuery UI^[docs]。 jQueryへの変換がほぼ終了しました。終了するときにjsFiddleリンクを投稿します。ここで

あなたが行く：あなたはjQueryとjQueryのUIを学ぶhttp://jsfiddle.net/pswRh/

した後、その要素をドラッグ可能にするためには非常に簡単だし、 - 必要に応じて - 指定された子要素でドラッグ無効にします。

HTML

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

CSS（オプション）

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

はJavaScript

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

出来上がり！ドラッグ可能なdivを作成しましたが、要素をドラッグしないため入力フィールドに入力することはできます。

また、ハンドルを指定することもできます。そうすることで、divを指定した子でドラッグすることしかできません。

HTML、CSS前

同じ

のJavaScript

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

コンマ（すなわち'#el1, #el2, #el3'）によって分離された複数の要素を指定します。

Answer 2

がappendFunctionにこれを追加します。

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

これはidを持つ要素のmousedownイベントをキャンセルしますinputId0。