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

Question

Еще один вопрос, который в течение нескольких последних дней клевал у меня. Как вы могли видеть из моих других вопросов, я создаю программное обеспечение карты разума. Итак (очень упрощенно) у меня есть два div. Тот, который является квадратом на странице, а другой внутри этого div, который примерно в 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, который можно перетаскивать. Надеюсь, я попытался объяснить, но если у меня нет here is a very simple jsfiddle, чтобы продемонстрировать ситуацию, которая у меня есть (хотя здесь нет щелчка мыши, чтобы продемонстрировать мою структуру div). В продукте, который я делаю, пользователь дважды щелкнет по холсту, и появится новый объект, и, следовательно, координаты мыши должны быть правильными.

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

Заранее спасибо.

EDIT: Не удалось упомянуть, что для части моего приложения я использую JQuery, поэтому решение с JQuery или без него будет в порядке. Еще раз спасибо.

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

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;