Flashhilfe.de - Flash Community

Hilfe, Java script Drag & Drop

 


AntwortenRegistrieren Seite1  

GotNoIdea#1
Benutzerbild von GotNoIdea
Beiträge: 1
Registriert: May 2016

30.05.2016, 17:21

Guten Abend,

folgendes Programm ist gegeben.

<html>
<head>
    <script type="text/javascript">
        var x0=0;
        var y0=0;
        var move=0;
        function stopMove(){
        move=0;
        box.style.backgroundColor = "white";
        }
        function startMove(e)
        {
        box = document.getElementById("coordiv");
        box.style.backgroundColor = "green";
        move=1;
        x0=e.clientX -  val(box.style.left);
        y0=e.clientY - val(box.style.top);
        }
        function val(s)
        {
            return(s.split('p')[0]);
        }
        function myFunction(e)
        {
        x=e.clientX;
        y=e.clientY;
        coor="Coordinates: (" + x + "," + y + ")";
        document.getElementById("demo").innerHTML=coor
        if(move){
           box.style.left = (x - x0) + "px";
           box.style.top = (y - y0) + "px"; 
        }
        }
        function clearCoor()
        {
        document.getElementById("demo").innerHTML="";
        }
    </script>
</head>
<body style="margin: 0px;">
    <div id="A" style="width: 149px; height: 99px; border: 1px solid; position: absolute;
        left: 300px; top: 300px; text-align: center;vertical-align: middle;font-size: 32pt" >
        A
    </div>   
    <div id="B" style="width: 149px; height: 99px; border: 1px solid; position: absolute;
        left: 100px; top: 300px; text-align: center;vertical-align: middle;font-size: 32pt" >
        B
    </div>   
    <div id="coordiv" style="width: 149px; height: 99px; border: 1px solid; position: absolute;
        left: 200px; top: 100px;z-index: 3000" onmousedown="startMove(event)" onmouseup="stopMove()"
        onmousemove="myFunction(event)" onmouseout="clearCoor()">
    </div>

    <p>
        Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p>
    <p id="demo">
    </p>
</body>
</html>

Dieses soll nun so umgeschrieben werden, das die verschiebbare Box beim Loslassen der Maustaste – je nach der Position des Mauszeigers – entweder die Position A oder B (in der Nähe) annimmt oder zurück zur Anfangsposition zurückspringt.
Wie kann ich das umsetzen?

Vielen Dank im Voraus.
Schlagwörter: drag & drop, java script
Werbung
Beiträge: 0
Registriert: Feb 2016



AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Hier Werben   Impressum
© 1999-2019 Sebastian Wichmann - Flashhilfe.de