Beste leden en JavaScript deskundigen,

Mijn vraag gaat over een goed werkend jQuery drag and drop script wat ik heb toegepast in mijn systeem. Het gaat om het volgend stuk code:

Code:

<script type="text/javascript">
    $(function(){
        $(\'#formcolor\').bind(\'drag\',function( event ){
            $( this ).css({
                top: event.offsetY,
                left: event.offsetX
                });
            });
        }); // doc.ready
    </script>

Zoals je ziet plaatst deze een div in dit geval #formcolor op de muis positie door event.offsetY en event.offsetX te gebruiken. Nu vind ik dit niet zo tof omdat hij de X en Y van de pagina zelf pakt terwijl dit de X en Y van mijn relative div moet zijn. Iemand suggesties waarmee ik dit wel juist kan krijgen?

Je kan element.offsetParent gebruik om de parent te krijgen van een element, en daar dan de x-positie van bekijken (offl=element.offsetParent.offsetLeft). Dan gebruik je gewoon event.offsetX-offl, en dat is de relatieve positie tot het parent element.

Hier heb ik nog niet genoeg brood van gegeten, zou je mij een voorbeeld code kunnen geven? event.offsetY-offl en event.offsetX-offl dragen niet bij tot een verbeterend effect. Waarschijnlijk moet ik meer toepassen maar goed... :(

Stel je hebt de volgende elementen:
el1: dit is het element waarvan je de positie wilt bepalen relatief tot el2
los divje: dit is de div waarin el1 zit

Dus qua structuur

Code:

<div>
  <div id='el1>
  </div>
</div>

PHP Code:

// JS
el1=document.getElementById("el1"); // Div el1
el1_x=el1.offsetLeft;
container_div=el1.offsetParent; // Welk element el1 in zit
container_div_x=container_div.offsetLeft; // De x-positie van de container div

relative_position_x=el1_x-container_div_x; // De positie van el1 relatief tot zijn parent element, de losse div 


*Ziet zwart voor de ogen*

Zo erg is het dan ook weer niet maar... ...ik begrijp het niet helemaal. Dus wat jij doet is eerst de X van de relative div bepalen, vervolgens bereken je de div die daar in staat aan de hand van de X van de pagina min de X positie van de relative div?