Martin Weber: JavaScript: Quelle von onmouseover

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

  1. JavaScript: Quelle von onmouseover

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    so ganz verstehe ich noch nicht, was bei deinem Drag'n'Drop passieren soll (wenn ich das Beispiel ausprobiere, verschwindet nur das roam1-div). Aber eines ist recht logisch: Wenn du Elemente verschachtelst, dann empfängst das äußere Element auch alle aufsteigenden Events des inneren. Das nennt sich Event Bubbling. Das heißt, wenn du mit der Maus über roam1 fährst, dann wird changeRoam gleich zweimal aufgerufen. Das kannst du verhindern, indem du in changeRoam das Bubbling verhinderst: evt.stopPropagation() aufrufen bzw. im IE evt.cancelBubble = true setzen.

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. JavaScript: Quelle von onmouseover

      Martin Weber
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      ich möchte damit einen bestimmten Bereich markieren. Es geht hierbei um ein Browsergame wo ich einem Spieler einer Mannschaft einen Wirkungsbereich zuordne, welchen man frei auswählen können soll.
      Habs jetz bissl anders gelöst:

        
<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){  
                var sender = evt.target.id;  
                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;  
                startX=(evt.x || evt.layerX)+diffX;  
                startY=(evt.y || evt.layerY)+diffY;  
                posLeft = startX  
                posRight= startX;  
                posTop=startY;  
                posBottom=startY;  
                isDown = true;  
                setRoam(id,posLeft,posTop,posRight-posLeft,posBottom-posTop);  
            }  
  
            function changeRoam(evt,id){  
                var sender = evt.target.id;  
                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>=startX){  
                    posLeft = startX;  
                    posRight= tempX;  
                }else{  
                    posLeft = tempX;  
                    posRight = startX;  
                }  
                if(tempY>=startY){  
                    posTop   =startY;  
                    posBottom=tempY;  
                }else{  
                    posTop   =tempY;  
                    posBottom=startY;  
                }  
                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');"
                              onmousemove="changeRoam(event,'roam1');"
                              onmouseup="endRoam(event,'roam1');">
                          <div
                              style="position:absolute; top:210px;left:210px;height:50px;width:40px;background:red"
                              id="roam1"
                              onmousedown="startRoam(event,'roam1');"
                              onmousemove="changeRoam(event,'roam1');"
                              onmouseup="endRoam(event,'roam1');"></div>

      </div>

      </td>
                      <td></td>
                  </tr>
              </table>
          </body>
      </html>

      [/code]

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln