[Javascript] Moving DIV Script

[Mini-Leopard]

Liebe Community!

Ich habe ein Script, mit welchem ich DIV's verschieben kann.
Das funktioniert soweit auch wunderbar.

Allerdings kann man die DIV's über den "Rand", also das übergeordnete DIV (z.B. die Seite selber), hinaus bewegen.
Das finde ich definitiv gar nicht klasse.

Nun hoffe ich, dass mir einer von euch einen Tip geben kann, wie ich die Beweglichkeit der DIV's einschränken kann.
Ich möchte, dass der maximale Bewegungsraum "automatisch" definiert ist. Also an das übergeordnete DIV angepasst wird.

Hier das Script:

[SIZE="2"]//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function draginit() {
 // Initialisierung der Überwachung der Events

  document.onmousemove = drag;
  document.onmouseup = dragstop;
}


function dragstart(element) {
   //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}


function dragstop() {
  //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.

  dragobjekt=null;
}


function drag(ereignis) {
  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.

  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  if(dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}[/SIZE]

Vielen Dank für jede Hilfe!
Liebe Grüße
…

 

[joro]

Hallo,
Du musst dafür in deiner Drag Funktion auf die Ränder prüfen.
Also gucken was das Elternelement für eine Position und Breite bzw. Höhe hat, und bei Überschreitung der Werte eben nicht dragx/dragy setzen.
Um zu sehen wie man sowas machen kann, schau Dir mal dieses Beispiel an http://javascript.jstruebig.de/javascript/67

Alternativ schau Dir einfach mal das JQueryUI Beispiel hier an
http://jqueryui.com/demos/draggable/#constrain-movement
Falls Du doch lieber JQuery verwenden willst.

Liebe Grüße,
joro