0

私はこのコードhttp://jsfiddle.net/xNHKP/6/を持っています(何らかの理由でフィドルでは動作しませんが、私のサイトでは動作します - http://bit.ly/JV5I0Z )

私が欲しいのは、連絡先フォーム（最後のメニュー項目をクリックして表示させる）をドラッグできることですが、誰かがテキストフィールドをドラッグまたはクリックすると、フォーカスが得られないため、入力できません。皮肉なことに、それは Internet Explorer で動作します。

では、クリックしたときにフィールドにフォーカスを当てるにはどうすればよいですか? それらをドラッグ不可にしてもかまいません。

ありがとう

編集：以下のコード（関連するものだけを含め、できるだけシンプルにしようとしました）

dragDrop = {
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
draggedObject: undefined,

initElement: function (element) {
    if (typeof element == 'string')
        element = document.getElementById(element);
    element.onmousedown = dragDrop.startDragMouse;
}}

<form id="contactForm" onSubmit="return sendMail();">
  <textarea id="message" rows="8"></textarea>
</form>

<script type="text/javascript">
  dragDrop.initElement(document.getElementById('contactForm'));
</script>
4

3 に答える 3

1

さて、あなたはそれに苦労しているようです、これがあなたが望むものを考慮して私が何をするかです：

  • フォームにAddEventlistenerを追加し、バブルしないようにして、内側の要素をクリックしてもトリガーされないようにします。
  • すべての内側の要素をいつものように生きさせましょう。厄介なイベントを追加しようとしないでください。

ユーザーがラベルなどをドラッグしてフォームをドラッグできるようにする必要がある場合は、ドラッグ可能な要素を明示的にフィルタリングする必要があります。次に、バブリングイベントに戻り、ドラッグできないものを除外できます。ドラッグできない場合は、テキストの選択に問題がないように、リターン以外のことは何もしないでください。

これがフィドルです

于 2012-05-18T08:56:05.687 に答える
1

さて、ここに答えがあります:それがドラッグされているフォームであり、他の内部要素ではないことを確認する必要があるだけなので、次のようにコードを編集してください:

dragDrop.startDragMouse = function(e) {
    dragDrop.startDrag(this);
    var evt = e || window.event;

    // Now check it's the correct element we're dealing with
    if(evt.target.id==="contactForm") {
        dragDrop.initialMouseX = evt.clientX;
        dragDrop.initialMouseY = evt.clientY;
        addEventSimple(document,'mousemove',dragDrop.dragMouse);
        addEventSimple(document,'mouseup',dragDrop.releaseElement);
    }

    return false;
}
于 2012-05-18T08:03:37.697 に答える
0

Firebugでは、フォーム要素をクリックするとすぐに「ドラッグ」クラスがフォームに割り当てられ、マウスボタンを離すとクラスが削除されることがわかります。マウスボタンが押されてマウスが動かされたときに、「dragged」クラスを割り当てる必要があります。

于 2012-05-18T07:50:05.580 に答える