Kaydırılabilir div içinde fare pozisyonu alın

Question

Yine de son birkaç gündür bana gıcırdayan başka bir soru. Diğer sorularımdan da gördüğünüz gibi, bazı zihin haritası yazılımları oluşturuyorum. Yani (çok basitleştirilmiş) İki tane div var. Biri sayfadaki bir kare, diğeri ise yaklaşık 10 kat daha büyük ve sürüklenebilir. Bu, nesnelerin ekrana yerleştirilebilmesi ve başka bir nesne eklenirken nesnenin hafifçe kaydırılabilmesidir. Bunu, dışsayının kaydırılabilir olmasını sağlayarak yaparım.

Yapmakta olduğum sorunlar java komut dosyasında fare konumu ile ilgili. Eğer farenin herhangi bir yerine farenin pozisyonunu alırsam, iç div'u en küçüğüne ve soluna göre dengeleyim (böylece kullanıcı tuvalin ortasına bakacak ve istediği gibi gidebilir). . Onlarca farklı fare koordinatını denedim ama bunların hiçbiri işe yaramıyor. Web üzerinde bir yerde bulduğum çapraz tarayıcı olması gereken bir örnek:

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 

Ancak bu çalışmaz. Hata neredeyse kesindir çünkü iç div sürüklenebilir. Umarım açıklamaya çalışıyorum, ama sahip olduğum durumu göstermek için here is a very simple jsfiddle'um yoksa (sadece fare tıklaması yapılmasa da, sadece div yapısını göstermek için). Kullanıcının ürettiği tuvalin üzerine çift tıklayacağım ve yeni bir nesne görünecek ve dolayısıyla fare koordinatlarının neden doğru olması gerektiğine inanıyorum.

Umarım birileri bana yardım edebilir.

Şimdiden teşekkürler.

DÜZENLEME: Uygulamamın bir kısmı için JQuery kullanıyorum, JQuery ile veya JQuery olmadan bir çözümün iyi olacağını belirtemedim. Tekrar teşekkürler.

Answer 1

Umarım probleminizi doğru anladım.

Kök belgeye göre herhangi bir öğenin geçerli ofsetini belirlemek için .offset()'u kullanabilirsiniz. Bu ofset daha sonra fare pozisyonu ile karşılaştırılabilir.

Geçerli fare konumunu belirlemek için event.pageX ve event.pageY kullanabilirsiniz.

$ {document} .scrollLeft() ve $ {document} belgesini kullanabilirsiniz. Geçerli kaydırma konumunu belirlemek için scrollTop().

iç div göre fare pozisyon

sonra bu çok geç olduğunu biliyorum

$("#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

elde ama aynı duruma kendim koştu ve bunu bu şekilde ele nasıl yapılabilir.

jQuery'yi kullanmak istemedim, böylece kaydırmalı ofsetlerle ilgili bir sorunu çözmek için bu yinelemeli ofset işlevini yazdım ve örneğin birden çok kaydırılabilir div içinde bir divun yerleştirilmesini sağladım.

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

gerçek için kullanma: Ben senin Fiddle jQuery kullanıldığını gördük

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

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