1

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);
});

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

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

ヒントやヒントをいただければ幸いです。

2011年4月7日更新

私が以下に持っていた答えのほとんどは、実際には私が求めているものではありません。私の設定を示すために、私のページの例をJSfiddleにアップロードしました。ここでの問題は、メッセージを相対的な位置に添付することです。これにより、ブラウザウィンドウのサイズが変更されると、メッセージがコンテンツとともに移動します。

例えば。ページの2番目の段落にメッセージを添付する場合、ブラウザ/デバイスの幅に関係なく、そのメッセージをその段落に固定するにはどうすればよいですか。私が知る限り、メッセージを相対的な位置に配置するために使用できる最も近いブロックレベルの要素（またはIDまたはクラスを持つ要素）を確立する必要があります。

それが質問をクリアすることを願っています＆あなたのすべての提案に感謝します。

4

4 に答える 4

2

私が知る限り、潜在的にいくつかの問題があります: 最初に私が見ることができるのは、「body」要素がページ全体をカバーしていることを確認する必要があるということです。（通常、divの背景を設定するだけでその範囲を確認できますが、bodyタグは特殊なケースです。背景はブラウザの表示領域全体に拡張されますが、ボックスはそうではない場合があります）

次に、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);
    });
于 2011-07-03T22:34:22.317 に答える
0

メッセージ 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/

于 2011-07-03T22:31:41.270 に答える
0

これは、マウスの動きを追跡する方法を示しているはずです 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);
   }); 
})

resize()これに加えて、divの位置を変更するために使用できます

 $(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
于 2011-07-03T22:26:51.640 に答える
0

div幅と高さを固定して、ページにシングルを配置することをお勧めします。dblclick次に、関数をdivではなくそれに適用しますbody。

動的div要素を絶対的に配置して、正しい位置に表示することもできます。ここにフィドルの例があります。

于 2011-07-03T22:27:44.513 に答える