Thema: Javascript und ein paar Cookies

Zitat von simsalabim

Wo aber setzt man das Cookie? Am Ende des obigem PHP-Snippels oder im Javascript?

Das bleibt Dir überlassen Du kannst Cookies per Javascript oder PHP generieren.

Hier was für Javascript.
Hier was für PHP.

MFG. Ricola

Also ich würde es so probieren:

Da Du ja ein schon vorhandenes Javascript nutzt (dom-drag.js), würde ich die Cookie-Sache in eine neue Funktion schreiben, z.B.

Code:

function setCookie()
{
document.cookie = 'meinCookie';
}

Diese Funktion würde ich in die dom-drag.js einfügen und in die

Code:

end : function()

der dom-drag.js

Code:

setCookie();

einfügen, also so:

Code:

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;
setCookie();
	}

MFG. Ricola

Allerdings fällt mir dazu noch ein:

Du willst anscheinend das ganze über die XY-Position per Java-Script machen. Das ganze hat einen Haken: Zum einen sind a) die XY-Koordinaten nicht in allen Browsern gleich, b) müsste dann das ganze auch noch entweder absolut positioniert werden, oder es muss (wie bei SimplePin2) einen Referenzcontainer geben, an denen sich die XY-Werte ausrichten können. Selbst dann, sind die neuen Modulpositionen aber immer noch "pixelgenau" ausgerichtet.
Was Du aber eigentlich willst, ist ja: Wenn ich einen betimmten Bereich irgendwohin ziehe, dann soll der Bereich auch dort bleiben. Es ist also eine Art Einrastfunktion für Bereiche in Bereichen.

Dazu sieh Dir mal am besten diesen Beitrag an. Hier wird mit Tabellen und JQuery gearbeitet.

MFG. Ricola

Zitat von simsalabim

Die Aufgabe, die ich mir gestellt habe, ist weit einfacher

Naja, genau das glaube ich eben nicht Schau Dir mal SimplePin2 an, dort wird zum einen der Layer "Draggable" gemacht und zum anderen auch die XY-Position des Layers ausgelesen und nach einem Klick auf ein Icon an dieser Stelle fest positioniert. Das geschieht hier zwar ohne Cookies, verdeutlicht aber das Prinzip das Du meinst.

Ich denke aber, das ist nicht das was Du willst. Wenn wir in Joomla von Modulpositionen sprechen, so sind diese doch aber im Template mit einer bestimmten Position (z.B. <?php mosLoadModules( 'left', -3 ); ?>) fixiert. Diese Modulposition wiederum steht in einer Tabelle oder einem DIV-Container. Um die Modulposition per Javascript auszutauschen, muss die Kennung des Containers verändert werden, damit das ganze Modul auch verschoben werden kann. Das wiederum würde bedeuten, dass Dein Template von vornherein schon ein Javascript enthält, dass a) z.B. ohne ein Cookie in einem Phantasiecontainer <div id="modulleft"><?php mosLoadModules( 'left', -3 ); ?></div> lädt, oder mit einem Cookie <div id="modulleft"><?php mosLoadModules( 'right', -3 ); ?></div>. Das wiederum heisst, dass es hier gar nicht um XY-Koordinaten geht, sondern nur darum, bestimmten Containern neue Eigenschaften per JavaScript zuzuweisen, oder?

Oder verstehe ich jetzt was völlig falsch???

Bestimmt meinst Du so etwas.

MFG. Ricola

Ok, dann also würde ich folgenden Code in einem zusätzlich eingebundenen Javascript probieren:

Code:

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onclick = getPosition;

var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

function getPosition(e) {

   if (IE) { // IE
     tempX = event.clientX - document.getElementById("referenzcontainer").offsetLeft;
     tempY = event.clientY - document.getElementById("referenzcontainer").offsetTop;
   } else {  // NS
     tempX = e.pageX - document.getElementById("referenzcontainer").offsetLeft;
     tempY = e.pageY - document.getElementById("referenzcontainer").offsetTop;
   }
}

function draginit() {

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

function dragstart(element) {

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

function dragstop() {

	dragobjekt=null;
}

function drag(ereignis) {

	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";
	}
}

und in Deiner dom-drag.js

Code:

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;

  var x = tempX;
  var y = tempY;
document.cookie = x + '|' + y;
	}

Ich bin mir jetzt nicht sicher ob das funktioniert, aber in meinem Originalscript wird auf diese Weise die XY-Position ausgelesen, a) vor dem Drag und b) nach dem Drag.
Im eigentlichen Layer müssen natürlich noch die Befehle rein.

Code:

onmouseover=\"draginit();\" onmousedown=\"dragstart(this);\"

MFG. Ricola