Определить местоположение в месте щелчка мышью - PullRequest
Новая
       21

Определить местоположение в месте щелчка мышью

1 голос
/ 04 июля 2011

Я собираю инструмент, который позволяет людям дважды щелкать и оставлять сообщения в любом месте HTML-страницы с помощью jQuery. Он наткнулся на камень преткновения, связанный с позиционированием сообщений.

Код, который я сейчас тестирую: 

$('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

Большинство ответов, которые я получил ниже, не совсем то, что я ищу. Я загрузил пример моей страницы в JSfiddle , чтобы показать вам мои настройки. Проблема здесь заключается в том, что сообщения прикрепляются в относительном положении, поэтому при изменении размера окна браузера сообщения перемещаются вместе с содержимым.

Например. Если я прикрепляю сообщение ко второму абзацу на странице, как заставить это сообщение придерживаться этого абзаца, независимо от ширины браузера / устройства. Насколько я могу судить, мне нужно установить ближайший элемент уровня блока (или элемент с идентификатором или классом), который можно использовать для позиционирования сообщения относительно.

Надеюсь, что проясним вопрос и спасибо за все ваши предложения.

Ответы [ 4 ]

2 голосов
/ 04 июля 2011

Насколько я могу судить, есть потенциально несколько проблем: первое, что я вижу, это то, что вам нужно убедиться, что элемент "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);
    });
0 голосов
/ 04 июля 2011

Я бы предложил разместить на вашей странице одну div с фиксированной шириной и высотой. Затем примените вашу dblclick функцию к этому div, а не body.

Вы также можете расположить динамические элементы div абсолютно, чтобы они отображались в правильных положениях. Вот пример скрипки .

0 голосов
/ 04 июля 2011

Вам необходимо разместить сообщение 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/

0 голосов
/ 04 июля 2011

Это должно показать, как отслеживать движения мыши 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>');
});
...