✔ DIV box verschieben und speichern

[h4dhunTer]

Hallo,
leider weiß ich nicht genau, wie ich mein Anliegen erklären soll. Trotzdem werde ich es mal versuchen.

Ich möchte auf meiner Startseite für die Member eine Funktion anbieten, die es Erlaubt DIV Boxen in vorgegebene Bereiche zu verschieben. Sehen kann man das ganze auch auf iGoogle.

Um es genau zu erklären:
Man hat 10 freie Felder auf der Startseite (unsichtbar und nur mit einem Rahmen versehen, wenn man eine Box draufsetzten möchte) und nun kann man eine Box hinzufügen (vorgegebener Inhalt). Diese Box kann man in die 10 Felder reinziehen, wie man lustig ist. Natürlich soll das ganze auch in einer Datenbank gespeichert werden.

Ist das so möglich (glaube schon) und wie ist das dann machbar?

 

[Quaese]

Hi,

schau mal bei mootools vorbei. Dort findest du einiges zu drag & drop.

Ciao
Quaese

 

[h4dhunTer]

Hallo,
danke Quaese doch leider ist das noch nicht das richtige. Es ist zwar drag & drop drinne, doch ich weiß nicht, wie ich das für mich umsetzten soll.
Kennt jemand ein Tutorial, was meinen vorstellungen sehr nahe kommt?

 

[FipsTheThief]

Naja das eigentliche Drag and Drop sollte klar sein , naja oki hab irgendwann mal ein Tut gefunden wo sie das Drag Object nicht selber verschieben sondern einen DIV Layer welcher als Platzhalter fungiert , sobald man ein Element verschieben will verschiebt man nicht mehr das eigentliche Element sondern den Platzhalter welcher absolut positioniert ist wo der Inhalt rein geclont wurde.

Des weiteren brauchst nur noch ein paar weitere Container wo die Koordinaten in ein Object gespeichert werden also höhe / weite / startx / starty.

Und dann vergleichst bei jeder Bewegung einfach nur noch ob dein Platzhalter Container mit deinen Koordinaten in einen der Koordinaten der Drop Container liegt.

Das englisch sprachige Tutorial dafür findest Du hier :
http://www.webreference.com/programming/javascript/mk/column2/

Das mit dem Platzhalter Div hat 1 wichtigen Vorteil für mich , und zwar gibt es in dem IE den fiesen zIndex Bug , das heisst obwohl das Element mit einen Index von meinetwegen 10000 ganz oben liegen müsste , rutscht es unter ein anderes Element falls dieses im DOM eine Ebene höher liegt.

Genau genommen machen die das bei mootools nicht anders. Wenn ein Element wo abgelegt wird brauchst nur noch ein Callback.
Zum Beispiel :

var callbackdrop = null;
var dummyobject = 'unser div layer';

function setCallbackOnDrop (func) {
  callbackdrop = func;
}

//der Event für Element droppen mouseup in der Regel
function dropElement (evt) {
   if(callbackdrop) callbackdrop.call(callbackdrop,dummyobject);
}

// unser callback ich lass es mal die Funktion sein
function elementdropped (dummy) {
   // achtung da kommt nur 1 Parameter an obwohl wir 2 angegeben haben
   // der erste Parameter sagt uns nur in welchen Object( Function) wir uns befinden
   // sollte oben this angegeben worden sein haben wir zugriff auf die Variablen in dropElement die mit this.varname deklariert sind
   alert(dummy);
}

Zu den Callbacks nen kleines Beispiel

            function foo () {
                this.name = "klaus";
                barfoo.call(this,'hallo');
            }
            
            function bar () {
                this.name = "peter";
                barfoo.call(barfoo,'hallo2','noch nen argument','und noch eines');
            }
            
            function barfoo (msg) {
                alert(arguments.length+" erstes Argument "+arguments[0]);
                alert(this.name); // gibt im FF den Namen der Funktion aus sobald bar gestartet wurde
            }
            foo();
            bar();

 

[kuddeldaddeldu]

Hi,

vielleicht ist script.aculo.us etwas für Dich?

LG

 

[h4dhunTer]

Hallo,
danke schonmal für diese Hilfe. Doch leider bekomme ich das nicht ganz umgesetzt. Nun habe ich aber eine Seite gefunden: http://www.selfhtml.de/demo/drags.html . So ähnlich brauche ich das, das wichtigste wäre nun, dass ich die Koordinaten zu einer PHP-Datei senden kann, um sie da zu verarbeiten.

 

[FipsTheThief]

Naja das was Scriptaculous anbietet oder Mootools ist schon das was Du suchst wenn Du es nicht selber machen willst.

Das einzigste was halt dann noch hinzu muss ist wenn Du ein Objekt ablegst , diese Koordinaten über Ajax dann rüber sendest an dein PHP Script das hat dann mit dem eigentlichen Drag and Drop gar nix mehr zu tun.

Dieses kannst über die Callback Handler lösen die ich bereits angesprochen habe. Wie das bei Mootools ist oder Scriptaculous kann ich auch nicht sagen da ich mich selber strikt weigere diese zu benutzen Aber diese besitzen sicher auch eine gute Doku dafür wo man sich halt mal ein wenig reinlesen muss dann.

 

[h4dhunTer]

//Edit: Hat sich erledigt. Lösung findet ihr unten.

$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);
		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
                    setRequest();
				}
			}
		);
	}
);
var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}
	return false;
};
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash.replace(/sort3\[\]=/gi, '').replace(/&/g, ','));
};

	var request = false;

	// Request senden
	function setRequest(value) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}

		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "ajax-test.php";
           serial = $.SortSerialize();
            var sort = serial.hash.replace(/sort3\[\]=/gi, '').replace(/&/g, ',');
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			request.send('sort='+sort);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('auswerten').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}