Meine Seite ist hässlich und nutzt kein XHTML... aber sau viel JS (von den netten ToolTips über das hier bis zu alert)

ist wirklich ein tolles Script. Gibt es auch eine Möglichkeit das wenn man das Element verschoben hat, dieses beim nächsten Aufruf oder beim aktualisieren der Seite an der Position erscheint wohin man es verschoben hat?.

Gruß,
bioweg

http://www.creativetextilart.de/test/tabelle.gif

erst hatte ich Tabellen, die haben aber je nach Inhalt ihre Größe geändert ( trotz fester Höhe/Breite Angaben)
dann habe ich auf div' mit css umgestellt, um das Layout umzusetzen. habe ich nur mit position:absolute hin bekommen. In den 400/400 Block in der Mitte soll dann noch der Test von oben.

Gibt es eine andere Mgl. mein gewünschtes Layout ohne position:absolute hinzubekommen und so dein drag/drop mit einbinden zu können ?

was muss noch geändert werden, damit auch der Farbwechsel wie in deinem Bsp. bei mir fkt. ?

Danke für deine Hilfe.

Frage zum Beispiel:

wenn ich deinen #test -div in einen anderen -div packe und den test-div mit css

position:absolute;
left: 100px;
top: 50px;

positioniere

und das dragObjekt auch

#dragObjekt{
position:absolute;
left: 50px;
top: 75px;
border:1px solid black;
}

sieht ja anfangs noch schön aus, aber sobald ich das dragObjekt anklicke verschiebt es sich und der test-div ist auch nicht mehr der "Rahnen" ( Farbwechsel )...
das liegt bestimmt an "position:absolute; und left: xxx; top:xxx; "

was muß man ändern damit die Koordinaten und der Farbwechsel wieder stimmen ?

Ist die Erklärung schlecht ?

hier liegt das geänderte Bsp.

http://www.creativetextilart.de/test/test.Bilder.bewegen3.htm

//var Drag = DragObject;
function getPos(o) {
	for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {}
	return [top, left];
}
window.onload = function()
{
	var box = document.getElementById('test');
	var box_top = getPos(box)[0];
	var box_left = getPos(box)[1];
	var box_bottom = box.offsetHeight + box_top;
	var box_right = box.offsetWidth + box_left;

	var obj = document.getElementById('dragObjekt');
	var obj2 = document.getElementById('dragObjekt2');

	var tmp = new DragObject(obj, obj.childNodes[0] );
	var tmp2 = new DragObject(obj2, obj2.childNodes[0] );

	tmp.ondrag =tmp2.ondrag = function(e, top, left){
		var drag_objekt = this.getPos();
		var is_in = (left > box_left) &&
		(top > box_top) &&
		(drag_objekt[2] + top < box_bottom) &&
		(drag_objekt[3] + left  box_left) &&
		(drag_objekt[0] > box_top) &&
		(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
		(drag_objekt[3] + drag_objekt[1] < box_right);

		return is_in;
	};

};

//var Drag = DragObject;
function getPos(o) {
for(var top = o.offsetTop, left = o.offsetLeft; o = o.offsetParent; top += o.offsetTop, left += o.offsetLeft) {}
return [top, left];
}
window.onload = function()
{
var box = document.getElementById('test');
var box_top = getPos(box)[0];
var box_left = getPos(box)[1];
var box_bottom = box.offsetHeight + box_top;
var box_right = box.offsetWidth + box_left;

var obj = document.getElementById('dragObjekt');
var obj2 = document.getElementById('dragObjekt2');

var tmp = new DragObject(obj, obj.childNodes[0] );
var tmp2 = new DragObject(obj2, obj2.childNodes[0] );

tmp.ondrag = function(e, top, left){
var drag_objekt = this.getPos();
var is_in = (left > box_left) &&
(top > box_top) &&
(drag_objekt[2] + top < box_bottom) &&
(drag_objekt[3] + left box_left) &&
(top > box_top) &&
(drag_objekt[2] + top < box_bottom) &&
(drag_objekt[3] + left box_left) &&
(drag_objekt[0] > box_top) &&
(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
(drag_objekt[3] + drag_objekt[1] box_left) &&
(drag_objekt[0] > box_top) &&
(drag_objekt[2] + drag_objekt[0] < box_bottom) &&
(drag_objekt[3] + drag_objekt[1] < box_right);

return is_in;
};
};

Ich habe, um einen besseren Überblick zu behalten, mal alle Funktionen gedoppelt, d.h. für ondrag() hab ich einmal tmp.ondrag und tmp2.ondrag bei den anderen auch.

Es macht aber gar keinen Unterschied, ob ich nun tmp2.ondrag im Script habe, oder es ausklammere...

Wenn du dir mal die Dateien anschauen willst: [Link entfernt]

Trotzdem schon mal vielen Dank!

var tmp = new DragObject(obj, obj.childNodes[0] );
var tmp2 = new DragObject(obj2, obj2.childNodes[0] );
tmp.ondrag = tmp2.ondrag = function(e, top, left){ ....}

var obj2 = document.getElementById('dragObjekt2');

[ var tmp = new DragObject(obj, obj.childNodes[0] ); ]
var tmp = new DragObject(obj2, obj2.childNodes[0] );

Damit kann ich jetzt beide Boxen bewegen, aber es wir leider nicht die Funktion ausgeführt, dass beide Boxen daraufhin überprüft werden, ob sie nun im Feld sind oder nicht, das geschieht nur bei der ersten.