Delphi-PRAXiS - JavaScript: Quelle von onmouseover

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - JavaScript: Quelle von onmouseover (https://www.delphipraxis.net/136250-javascript-quelle-von-onmouseover.html)

JavaScript: Quelle von onmouseover

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:

Code:

			<html>

    <head>

        <script type="text/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>

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 :dp:
:angel:

Re: JavaScript: Quelle von onmouseover

Habs gelöst, etwas anderer Lösungsansatz, wen es interessiert:

Code:

			<html>

    <head>

        <script type="text/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>