Drag and Drop - Ein paar Fragen zur Realisierung

finnex

Erfahrenes Mitglied
Hallo,
ich habe gerade vor ein Div-Element per Drag and Drop im Browser verschieben zu können.
Das klappt soweit auch ganz gut. Jedoch spring mein Div-Element immer mit der linken oberen Ecke zum Mauszeiger.

Hier mal der Quelltext:
Code:
<html>
 <head>
  <title>Drag</title>
  <link rel="stylesheet" type="text/css" href="drag.css">
  <script type="text/javascript">
  IE = document.all&&!window.opera;
  
  var drag = 0;
  
  function init()
  {
    document.onmousemove = movebox;
    document.onclick = stopdrag;
  }
  function movebox(ereignis) 
  {
    if(drag == 1)
    {
     document.getElementById('box').style.left = (IE) ? window.event.clientX : ereignis.pageX ;
     document.getElementById('box').style.top = (IE) ? window.event.clientY : ereignis.pageY;
    }
  }
  function startdrag(ereignis)
  {
    drag = 1;
  }
  function stopdrag()
  {
    drag = 0;
  }
  
  </script>
 </head>
 <body onload="init();">
  <div id="box" onmousedown="startdrag(this);">
    <div id="boxinfo">
    </div>
  </div>
 </body>
</html>

hier noch die CSS Datei:

Code:
#box     { position: relative; top:50px; left:50px; width:300px; height:300px;
           border:2px; border-style:solid; }
       
#boxinfo { position: absolute; top:0px; right:0px; width:100%; height:20px;
           border:1px; border-style:solid; }

Wie kann ich es machen damit ich die Box an jederstelle "anpacken" kann und sie somit verschiebe?

MfG Finnex
 
Du musst dir bei ersten klick den Offset der Maus relativ zur linken oberen Ecke merken und den jedes mal bei der Neuberechnung der Position wieder abziehen.
 

Neue Beiträge

Zurück