Получить положение мыши в прокручиваемом div

Еще один вопрос, который в течение нескольких дней клевал у меня. Как вы могли видеть из моих других вопросов, я создаю программное обеспечение карты разума. Итак (очень упрощенно) у меня есть два div. Тот, который является квадратом на странице, а другой внутри этого div, который примерно в 10 раз больше и перетаскивается. Это значит, что объекты могут быть помещены на экран, а затем слегка перемещены в сторону, пока добавляется другой объект. Я делаю это, создавая прокрутку внешнего div.

Проблемы, которые у меня возникают, связаны с положением мыши в java script. Если я получу положение мыши в любом месте в div, это не будет правильным, поскольку я компенсирую внутренний div на половину его размера до верхнего и левого (так что пользователь смотрит на середину холста и может идти любым способом), Я пробовал десятки различных координатных функций мыши, но ни один из них, похоже, не работает. Пример, который должен быть перекрестным браузером, который я нашел где-то в Интернете, это:

function getMouse(e) {
  var posx;
  var posy;
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  }
  else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft;
    posy = e.clientY + document.body.scrollTop  + document.getElementById("canvas").scrollTop;
  }
} //getMouse

Но даже это не работает. Я почти уверен, что ошибка связана с тем, что у меня есть внутренний div, который можно перетаскивать. Надеюсь, я попытался объяснить, но если я не здесь очень просто jsfiddle, чтобы продемонстрировать ситуацию, в которой я (хотя здесь нет нажатия мыши, чтобы продемонстрировать мою структуру div). В продукте, который я делаю, пользователь дважды щелкнет по холсту, и появится новый объект, и, следовательно, координаты мыши должны быть правильными.

Я надеюсь, что кто-то там может мне помочь.

Спасибо заранее.

РЕДАКТИРОВАТЬ: Не удалось упомянуть, что для части моего приложения я использую JQuery, поэтому решение с JQuery или без него будет в порядке. Еще раз спасибо.

Ответ 1

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

Вы можете использовать . offset(), чтобы определить текущее смещение любого элемента относительно корневого документа. Это смещение можно сравнить с положением мыши.

Вы можете использовать event.pageX и event.pageY, чтобы определить текущую позицию мыши.

Вы можете использовать ${document} . scrollLeft() и ${document}. scrollTop(), чтобы определить текущую позицию прокрутки.

Положение мыши относительно внутреннего div можно затем получить с помощью

$("#outer_canvas").mousemove(function(e) {
    var relativePosition = {
      left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left,
      top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top
    };
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>');
});

Ответ 2

Я знаю, что это очень поздно, но я столкнулся с одной и той же ситуацией, и именно так я справился с ней.

Я не хотел использовать jQuery, поэтому я написал эту функцию рекурсивного смещения, чтобы справиться с проблемой смещения прокрутки и размещения div, например, в нескольких прокручиваемых div.

function recursive_offset (aobj) {
 var currOffset = {
   x: 0,
   y: 0
 } 
 var newOffset = {
     x: 0,
     y: 0
 }    

 if (aobj !== null) {

   if (aobj.scrollLeft) { 
     currOffset.x = aobj.scrollLeft;
   }

   if (aobj.scrollTop) { 
     currOffset.y = aobj.scrollTop;
   } 

   if (aobj.offsetLeft) { 
     currOffset.x -= aobj.offsetLeft;
   }

   if (aobj.offsetTop) { 
     currOffset.y -= aobj.offsetTop;
   }

   if (aobj.parentNode !== undefined) { 
      newOffset = recursive_offset(aobj.parentNode);   
   }

   currOffset.x = currOffset.x + newOffset.x;
   currOffset.y = currOffset.y + newOffset.y; 
   console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
 }
 return currOffset;
}

Используя его для реального:

    var offsetpos = recursive_offset (this); //or some other element

    posX = event.clientX+offsetpos.x;
    posY = event.clientY+offsetpos.y;