Martin Weber: JavaScript: Quelle von onmouseover

Beitrag lesen

SELF-Forum

JavaScript: Quelle von onmouseover

Martin Weber
– Informationen zu den Bewertungsregeln

Hiho,

ich möchte folgendes erreichen:

ein DIV(roam) in einem anderen DIV(feld)

roam soll einen Bereich in feld markieren, dazu möchte ich irgendwo in feld die maustaste drücken(onmousedown) dann den Mauszeiger bei gedrückter Maustaste wohin ziehen(onmousemove) und beim loslassen der Maustaste(onmouseup) sollen die werte(left,top,right,bottom) von roam gespeichert werden.

jetz hab ich das Problem, das ich nicht immer von linksoben nach rechtsunten die maus ziehe, sondern auch mal andersrum und es dann Konflikte im Handling der aktuellen top und elft Werte gibt.

Folgenden Code hab ich jetzt:

  
<html>  
    <head>  
        <script type="text/javascript" >  
[code lang=javascript]  
            var isDown = false;  
  
            var posLeft = 0;  
            var posTop = 0;  
            var posRight = 0;  
            var posBottom = 0;  
  
            function setRoam(id,left,top,width,height){  
                document.getElementById(id).style.left = left;  
                document.getElementById(id).style.top = top;  
                document.getElementById(id).style.width = width;  
                document.getElementById(id).style.height = height;  
            }  
  
            function startRoam(evt,id,sender){  
                var diffX = 0;  
                var diffY = 0;  
                if(sender == id){  
                    var roamdiv = document.getElementById(sender);  
                    diffX = roamdiv.offsetLeft;  
                    diffY = roamdiv.offsetTop;  
                }  
                document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;  
                posLeft=(evt.x || evt.layerX)+diffX;  
                posTop=(evt.y || evt.layerY)+diffY;  
                posRight=posLeft;  
                posBottom=posTop;  
                isDown = true;  
                setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);  
            }  
  
            function changeRoam(evt,id,sender){  
                var diffX = 0;  
                var diffY = 0;  
                if(sender == id){  
                    var roamdiv = document.getElementById(sender);  
                    diffX = roamdiv.offsetLeft;  
                    diffY = roamdiv.offsetTop;  
                }  
                document.getElementById("ausgabe").textContent = sender+"|"+id+"|"+(sender==id)+"|"+(evt.x || evt.layerX)+"+"+diffX +"|"+(evt.y || evt.layerY)+"+"+diffY;  
                var tempX=(evt.x || evt.layerX)+diffX;  
                var tempY=(evt.y || evt.layerY)+diffY;  
                if(tempX>=posLeft){  
                    posRight = tempX;  
                }else{  
                    posRight=posLeft;  
                    posLeft = tempX;  
                }  
                if(tempY>=posTop){  
                    posBottom=tempY;  
                }else{  
                    posBottom=posTop;  
                    posTop = tempY;  
                }  
                if(isDown){  
                    setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);  
                }  
            }  
  
            function endRoam(evt,id){  
                if(isDown){  
                    setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);  
                }  
                isDown=false;  
            }

</script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="ausgabe" style="position:absolute;top:100px;left:10px;width:200px;height:50px;"></div>
                    <div id="feld1"
                        style="
                        background-image:url(feld.jpg);
                        position:absolute;
                        left:200px;
                        top:200px;
                        width:400px;
                        height:300px;"
                        onmousedown="startRoam(event,'roam1','feld1');"
                        onmousemove="changeRoam(event,'roam1','feld1');"
                        onmouseup="endRoam(event,'roam1');">
                    <div
                        style="position:absolute; top:210px;left:210px;height:50px;width:40px;background:red"
                        id="roam1"
                        onmousedown="startRoam(event,'roam1','roam1');"
                        onmousemove="changeRoam(event,'roam1','roam1');"
                        onmouseup="endRoam(event,'roam1');"></div>

</div>

</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
[/code]

Das Problem: Obwohl ich mitm Mauszeiger über roam fahre, wird das onmousemove-Ereignis von feld ausgelöst. Ich bekomme zwar im Handler die Top und left Werte von roam, aber beim sender steht feld drin. Woran liegt das, bzw wie kann ich das beheben?

Hoffe mir kann hier jemand helfen

Beitrag melden
–
Informationen zu den Bewertungsregeln