Boxen verschiebar machen

S

simsfan

Grünschnabel
Ich weiss nicht ob ich hier richtig bin und habe da eine frage also ich habe folgendes vor ich möchte boxen auf meiner hp verschiebbar machen beispiel igoogle ich hatte schon einen code gefunden mit dem man boxen verschieben kann aber sobald ich das fenster neu öffnete waren die boxen wieder auf normaler postition kann mir da vielleicht jemand helfen den ich kenne mich nich so mit diesen ganzen scriptsprachen aus
 
Ja soweit war ich auch schon aber ich möchte es so haben das wenn man eine box verschiebt , das die position dann auch gespeichert wird so das wenn ich das fenster neu öffne die boxen wieder auf der position sind wo ich sie vorher auch hinverschoben habe (!)
 
[Also ich galube man könnte mein problem mit cookies lösen nur leider weiss ich nicht wie ich dies in den code mit einbauen könnte könntet ihr mir vielleicht den code ändern ?
Den code von mir hab ich nun als anhang angehängt vielleicht könnt ihr ihn ja für mich ändern ?
HTML: 
<html>
<head>
<title>Drag-and-Drop</title>
<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//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";
  }
}
//-->
</script>
</head>
<body onload="draginit()">
<div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>
<div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00">hiichbin </div>
</body>
</html>
 

Anhänge

Zuletzt bearbeitet:
Hab mir das mal angesehn... Die Seite, die du oben nanntest hatte ich schonmal gesehn Maik...
Hab mir die File auch mal runter geladen und probier damit nen bissl rum und so...

Nur fehlen mir einige Kleinigkeiten daran...
1. dass das gedraggte Objekt in einem festen Bereich landet... Also ein/andockt...
2. dass ich die Informationen von Position und Co weiter verarbeiten kann in php...

Ich bin bereits durch die Suchfunktion genau hier gelandet...
Zu meiner Schande muss ich gestehen, dass ich absoluter JS-N.0.0.b bin, da ich hauptsächlich nur mit PHP un Co arbeite :(

[OFFTOPIC]
Euer Forum mag das Wort N.o.o.b nicht? ^^
 
Hi,

das Thema hatten wir schonmal. Dort habe ich in einem Beitrag auch ein Beispiel verlinkt, wo auch das Speichern in Cookies umgesetzt ist. Ein Blick in den kommentierten Quellcode sollte die Funktionweise ausreichend beschreiben.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück