Hilfe, Java script Drag & Drop

Seite

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

Antworten

Seite