[JavaScript] Drag and Drop

joop · 9. Mai 2008

Drag and Drop

Guten Tag,

ich würde gerne bei einer Homepage den Maincontent als Drag & Drop machen. So dass jeder nach belieben die Seite einrichten kann. Allerdings bräuchte man dann noch eine Speicherfunktion, ein Zurücksetzen und ein Fixen Button o.Ä.

Könnte mir jemand grob erklären wie sowas machbar ist? Java das Drag & Drop ist klar. Aber das Speichern Zurücksetzen und Fixen der Ebenen.

LGjoop

Anzeige

highpinger · 9. Mai 2008

AW: Drag and Drop

Du könntest die Koordinaten der Box auslesen und als Cookies speichern. Wenn der User dann die Seite neu läd, musst du nur überprüfen, ob schon ein Cookie gesetzt wurde, wenn ja halt die Box an der stelle positionieren. Wenn kein Cookie gesetzt sind, müsstest du einen mit Standardwerten setzten und die Box an der "Standardstelle" spawnen.

Dein "Zurücksetzen"-Button würde nun so funktionieren, dass er die alten Cookies löscht und die Seite neu läd.
Was du dem Ebenen fixieren meinst, weis ich leider nicht

joop · 9. Mai 2008

AW: Drag and Drop

Damit meine ich, dass man die Boxen nicht mehr verschieben kann

Murdoc · 9. Mai 2008

AW: Drag and Drop

java != javascript.

drag&drop is klar, aber der rest ned? omg...

wie wärs wenn du für die dragable-elemente vars anlegst wo du die original-position abspeicherst. wenn du ned weisst wie das geht, kann ich mir ned vorstellen das drag&drap klar is

(!strict) du kannst einfach original offset-top|left als attribut mit angeben.

Code:

<div originalOffetTop="200" orginalOffsetLeft="200">foo</div>

sinnvoller wäre aber

Code:

<script>var ElementFooOffset = [200,200];</script>
<div>mein name ist foo</div>

wobei du ja ned immer wissen kannst wo die elemente liegen, deswegen einfach mal javascript lernen

Code:

//vor dem ersten drag
var ElementFooOffset = [
 {element}.offsetLeft,
 {element}.offsetTop
];

javascript kann cookies setzen und auslesen. (na klingelts?)
der event onload hilft da ungemein

ein fixieren wird ned möglich sein, wegen position:absolute

joop · 10. Mai 2008

AW: Drag and Drop

Wie kann ich nun diese Drag & Drop Objekte als Cookie speichern?

highpinger · 10. Mai 2008

AW: Drag and Drop

Code:

function createCookie(koordX, koordY) {
 var expires = new Date();
 expires = new Date(expires.getTime() +1000*60*60*24*365);
 document.cookie = 'x='+koordX+'; expires='+expires.toGMTString()+';';
 document.cookie = 'y='+koordY+'; expires='+expires.toGMTString()+';'; 
}

function readCookie( ) {
 var koordX = 0;
 var koordY = 0;
 var kekse = document.cookie.split(';');
 for(var i=0; i<kekse.length; i++) {
 var keks = kekse[i];
 while (keks.charAt(0)==' ') keks=keks.substring(1,keks.length); // spacer entfernen
 if(keks.indexOf("x=") == 0) koordX = keks.substring(2,keks.length);
 if(keks.indexOf("y=") == 0) koordY = keks.substring(2,keks.length);
 }
}

bei createCookie werden 2 Cookies gesetzt(x und y). Expire gibt dabei an, wann die Cookies ablaufen/zerfallen, also vom Browser gelöscht werden (in diesem Fall nach einem Jahr).
Bei readCookie() wird der Cookie abgerufen. Da der Browser ihn als Zeichenkette und mit Semikolon getrennt zurückgibt, beim Semikolon trennen und dann einzeln guggen, ob der Cookie die X- bzw die Y-Koordinate ist.

Das Einzige was du jetzt noch vorher machen musst, ist halt das auslesen der aktuellen Koordinaten...

Nützliche Suchen

[JavaScript] Drag and Drop

Videos zum Themenbereich