✔ JavaScript Drag-Drop Speicherung Problem

Seppi123

Seppi123

Erfahrenes Mitglied
Hallo an alle ;)


Habe auf http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/ folgenden Code gefunden, um Divs aber auch andere komplett auf der Seite frei zu verschieben. Ich möchte die Position danach speichern, dass es für diesen Besucher immer angezeigt wird, bis er beispielsweise "Zurücksetzen" "Neustarten" .... Link drückt! Außerdem weiß ich nicht, wie ich von jedem Objekt (Div, etc..) die Position erhalte, da nur zwei Variablen dragx und dragy existieren.

Code: 
<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"> </div>
</body>
</html>

Ich bin für jeden Lösungsansatz oder Code (AM BESTEN ABER NUR LÖSUNGSANSÄTZE, da ich ja selbst was lernen will :) )
 
Zuletzt bearbeitet:
Hallo Seppi ich arbeite grad an was ähnlichen die Positionen speichern (tüfftele ich auch grad drann)
weiss ich noch kein Tip.

Zu dem Speichern MySQL im allgemeinen nutze ich die jQuery AJAX post() Method um dann ein Update oder Insert Into zu feuern.

Ich hoffe das hilft schon etwas.

Gruß Joe.
 
http://jsfiddle.net/davidThomas/DGbT3/
Dieses Beispiel hat mir gerade geholfen aber ist eben JQuery und nicht nur Javascript.
Der Code zeigt die genaue Position beim draggen die Variablen sind somit zum Ajax.Post() verfügbar.

Ich habe auch irgendwo nen Beispiel gesehen von Qauese hier auf Tutorials.de das rein mit Javascript also nicht JQuery geschrieben wurde. Finds nur leider gerade nicht.
Edit doch hier:
(Quelltext anschauen)
http://playground.quaese.de/tutorials/dragable_elements/variante1.html
http://playground.quaese.de/tutorials/dragable_elements/
 
Zuletzt bearbeitet:
Joe hat gesagt.:
(tüfftele ich auch grad drann)
Zum Vergrößern anklicken....

Brauchst nicht kompliziert denken ;)

Übergebe einfach die ID des Elements an eine JS Funktion zusätzlich also z.B. so hier:

Code: 
<div id="img1" onmousedown="fillobejctid('img1');dragstart(this);SavePos(this);"></div>

fillobjectid(); ist eine JavaScript Funktion, die einfach eine Variable objectid füllt, hier übergibst du die ID (bei mir wars img1)
Danach startest du das draggen und dann speicherst du die Position, die Position kannste mit nem Cookie speichern, wobei der Cookie Name die Objekt ID ist (also bei mir img1) und die Positionen X,Y als Wert, mittels PHP den Cookie auslesen und dann per PHP zum Beispiel split(); benutzen ;)

Musst die beiden Werte einfach mit einem ; oder | trennen und dann per php $wert = split(";", $_COOKIE["deincookie"]); trennen.
Dann erhälst du einen Array wo du X zum beispiel mit $wert[0]; und Y mit $wert[1]; erhälst

Hoffe ich konnte dir jetzt helfen ;)
 
  • Gefällt mir
Reaktionen: Joe
Danke Seppi123.
Ich habs etwas anders gelöst ich nutze zb die Datenbank.. aber wahrscheinlich ist dein Cookie performanter.

Javascript: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(init5);
function init5() {
	var myVar4;
	$('#chatbox').draggable(
	{
		handle: "#makeMeDraggable",
		drag: function(){
			clearTimeout(myVar4);
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
		},
		stop: function (){
			var finalOffset = $(this).offset();
			var finalxPos = finalOffset.left;
			var finalyPos = finalOffset.top;
			myVar4=setTimeout(function(){				
				var Nameme="<?echo "$Username";?>";
				jQuery.ajax({
					  url: 'templates/updatechatbox.php',
					  type: 'post',
					  data: {ChatboxPosX: finalxPos , ChatboxPosY: finalyPos , Username: Nameme},
						error: function()
					  {
						  alert('Ein Fehler ist aufgetreten');
					  }
				});
			},1000);
		}
	});
}

</script>

Ich wollte nach dem stop also den MouseUp noch nen wenig Zeit geben wenn mans nochmal nen Stück verschieben mag.
Bei mir benötigts ja kein Drop daher fällt das ganz weg.
 
Ja das mit Ajax bzw. JQuery und Post hatte ich auch schon versucht, war mir aber persönlich zu aufwendig, da ich mir erstmal JavaScript näher bringen will (komme eigentlich nur von PHP ;D)
 
Dann gehts dir wie mir, komme auch eher aus der PHP Richtung da ich aber seit ner Woche oderso an nen Chat bastele komme ich Javascript Stück für Stück näher.

Man ist ja meist froh zum Anfang wenns übehaupt klappt..selten das man fürs beinahe selbe Ergebniss seinen kompletten Code umschmeisst.
JQuery liegt mit etwas näher weil es mir A vieles abnimmt und B ich bereits einiges implementiert habe mit JQuery.

Mir ist aber leider auch ein Nachteil aufgefallen und zwar das verschiedene JQuery Scripte aus den Netz und damit verschiedener JQuery Versionen leicht zu Inkompatiblitäten führen können. Und dann finde das erstmal raus ;) Somit machst du es besser :)
 
Naja aber JQuery bietet mehr Möglichkeiten und schon alleine das simpelste , nämlich die alert() Boxen von JQuery sehen einfach besser aus ^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück