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

Question

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

Проблемы, с которыми я сталкиваюсь, связаны с положением мыши в java-скрипте. Если я получу положение мыши в любом месте в 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 будет хорошо. Еще раз спасибо.

Answer 1

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

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

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

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

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

$("#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>');
});

Answer 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;