マウスクリックの位置での位置を決定する

Question

jQueryを使用してHTMLページのどこにでもダブルクリックしてメッセージを残すことができるツールをまとめています。それは、メッセージの位置づけにかかわる不安を抱えています。

コード私は、現時点ではテストしてい：

$('body').bind('dblclick', function(e) { 

    var message = $('<div class="message">Form here</div>').css({ 
     'left' : e.pageX, 
     'top' : e.pageY 
    }); 

    $(this).append(message); 
}); 

これは、マウスクリックの位置に新しい「メッセージ」を作成します。これはある程度は機能しますが、ブラウザウィンドウのサイズが変更されるとすぐに、 'メッセージ'が位置をずらして移動します。私が最終的にメッセージを保存して（そしてそれらを取得する）ことを望んでいるので、すべてのブラウザのすべてのユーザの異なる場所にロードするのは理想的ではありません。そのページがメディアクエリを使用していても、メッセージをページレイアウトに添付します。

私が問題を理解したことは、ユーザーがクリックした最も近い要素を基準にメッセージを配置する必要があることです。質問は。どうすればいい？

ヒントやヒントがあれば幸いです。

更新04/07/11

私は以下の持っていた答えのほとんどは、私が後だ本当にありません。私はexample of my page to JSfiddleをアップロードして私の設定を表示しています。ここで問題となるのは、メッセージが相対位置に添付されるため、ブラウザウィンドウのサイズが変更されるとメッセージがコンテンツと共に移動することです。

たとえば、ページの第2段落にメッセージを添付すると、ブラウザー/デバイスの幅にかかわらず、その段落にスティックするメッセージを取得する方法を教えてください。私が知る限り、メッセージを相対的に配置するために使用できる最も近いブロックレベルの要素（またはIDまたはクラスを持つ要素）を確立する必要があります。

あなたのご意見をお寄せいただきありがとうございます&ご質問ありがとうございます。

Answer 1

これがなければならないあなたは、私があなたのページ上の単一のdivを置くことを示唆しているのdiv

$(window).resize(function() { 
    $('body').prepend('<div>' + $(window).width() + '</div>'); 
}); 

Answer 2

の位置を変更するresize()を使用することができ、マウスの動きを追跡する方法をこれに沿ってhttp://docs.jquery.com/Tutorials:Mouse_Position#How_do_I_find_the_mouse_position.3F

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ e.pageY); 
    }); 
}) 

を示し、幅と高さが固定されています。 bodyではなく、dblclickの機能をdivに適用してください。

動的なdiv要素を絶対位置に配置して、正しい位置に表示することもできます。ここにはexample fiddleがあります。

Answer 3

あなたがメッセージのdivを配置する必要があります。

$('body').bind('dblclick', function(e) { 

    var message = $('<div class="message">Form here</div>').css({ 
     'left' : e.pageX, 
     'top' : e.pageY, 
     'position' : 'fixed', 
     'zIndex': 999999 
    }); 

    $(this).append(message); 
}); 

限り、潜在的にいくつかの問題がある、私が言うことができるように

http://jsfiddle.net/PvFTN/

Answer 4

：最初、私はあなたがそれを確認する必要がありますされて見ることができます"body"要素はページ全体をカバーします。なぜなら、それはボックスが許す限り拡張するからです。 （私は通常、divの背景を設定するだけで普通はその範囲を見ることができますが、bodyタグは特殊なケースです。その背景はブラウザの可視領域全体に広がっていますが、ボックスの場合もありません）

第2に、CSSの "position"プロパティを "absolute"に設定することが重要です。 ：

$('body').bind('dblclick', function(e){ 

     var message = $('<div class="message">Form here</div>').css({ 
      'position' : 'absolute', 
      'left' : e.pageX, 
      'top' : e.pageY 
     }); 

     $(this).append(message); 
    });