Antworten auf deine Fragen:
Neues Thema erstellen

Div verschieben --> Pos in DB speichern

Blackout289

Nicht mehr ganz neu hier

Hallo Leute,
ja also ich hab mal ne frage (wer häts gedacht :D)
Und zwar hab ich folgendes script gefunden(weiß nich mer wo ;D)

Code:
    function macheRequest2(src) {
        http_request2 = false;
        if (window.XMLHttpRequest) {
            http_request2 = new XMLHttpRequest();    
            if (http_request2.overrideMimeType) {
                http_request2.overrideMimeType('text/xml');
            }
        } 
        else if (window.ActiveXObject) { // IE
            try {
               http_request2 = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) {
                    try {
                       http_request2 = new ActiveXObject("Microsoft.XMLHTTP");
                    } 
                    catch (e) {}
            }
        }
        if (!http_request2) {
           alert('Browser veraltet?');
            return false;
        }        
        http_request2.onreadystatechange = showemail;
        http_request2.open('POST', src, true);
        http_request2.send(null);
    }
    
    
    function showemail() {
        if (http_request2.readyState == 4) {
            document.getElementById("email").innerHTML = http_request2.responseText;
        }
    }
Dies verwende ich um ein DIV Element anzuzeigen
Und dieses hier um das Element verschiebbar zu machen(selfhtml)
Code:
//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";
  }
}
Da sich mein Wissen in JS und dementsprechend auch in AJAX in Grenzen hält, hab ich folgende Frage:

Wie speicher ich die Position des DIVs (später sollen es mehrere sein) ab, und lese sie wieder aus. Die Daten sollen in ner MYSQL DB gespeichert werden. Evlt mit einem Speichern Button (oder automatisch nach 30s oder so^^) , dass die DB nicht jede Sekunde beschrieben wird.

DANKESCHÖN im vorraus =)
Black
 

ChrisvA

Aktives Mitglied

AW: Div verschieben --> Pos in DB speichern

Wo hängt es denn bei dir genau?
Also für eine Datenbankspeicherung solltest du PHP beherrschen.
Um dann Werte an die Datenbank zu übertragen, musst du das Skript mit bestimmten Parametern aufrufen. Dabei musst du aber die Sicherheit beachten, dass dir nicht jeder die Position verändern kann.
 

Blackout289

Nicht mehr ganz neu hier

AW: Div verschieben --> Pos in DB speichern

ja php beherrsche ich soweit..
Mir geht es um die Parameter..
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
Soll ich einfach diese Teile hier, in die DB einfügen?
Und bei der Ausgabe die Variablen einsetzen(also die aus der DB)?
Von der Sicherheit her, Jeder User kann seine Seite anordnen wie er möchte --> Jeder User erhält eigene Werte.
(irgendwie bin ich nur auf dem schlauch gestanden :D).

Jo und dann wollte ich noch fragen, wie ich ein Div "offen" lassen kann?
Die Seite ist mit einem switch aufgebaut (include...), also ist das Div immer vorhanden.
Hier liegt nun das Problem, wie finde ich mit JS heraus ob das div offen war --> auf der nächsten Seite/refresh wieder öffnen, oder geschlossen war --> zulassen?

MFG Black
 

saila

Moderatorle

AW: Div verschieben --> Pos in DB speichern

Hi,

das mag nun nicht zwingend passen, aber da ich derzeit mich dermassen mit jQuey-Framework befassen, würde ich dir mal ganz einfach zu jQuery raten.

Unter jQuery gibt es die jQuery UI. In dieser ist das Thema dragAndDrop von Boxen oder was auch immer enthalten. Das speichern dieser Boxen ebenfalls und das per ajax. Welche Daten dann zu speichern sind, würde ich dir dann mitteilen, wenn du das Framework inkl. der UI eingebunden hast.
 

Blackout289

Nicht mehr ganz neu hier

AW: Div verschieben --> Pos in DB speichern

joo klingt nich schlecht, aber bei jquery hat ich scho ma das Problem, dass man hier nur ein Plugin pro seite einbinden kann.
Und ich weiß noch nicht, ob ich das nicht wo anders brauch^^
Das mit der Lizenz hab ich auch noch nicht so drinne, ich/wir schreibn grad an ner kleinen Community, un da is die Frage, ob ich das da Nutzen darf usw..

Kann ich das komplett mit der JqueryUI lösen:
Wir wollen so ne art desktop machen. Also die Fenster halt mit div ein/ausblenden usw wie oben beschrieben..joa geht das?
Dankeschööhön^^
 

Blackout289

Nicht mehr ganz neu hier

AW: Div verschieben --> Pos in DB speichern

äähm ja ich versuch nomma aufm "alten" weg :D einfach so..jquery hört sich auf jeden gut an...
Ja äähm ich muss ja hierraus Variablen definieren

dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";

wie funktioniert das, damit ich diese mit php nutzen kann?
Ich vermute mal mit AJAX, aber wie mach ich das genau? :D
 

sokie

Mod | Web

AW: Div verschieben --> Pos in DB speichern

dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
damit SETZT du die position für das Objekt "dragobjekt"

ich würde dir auch zu ui.jquery raten, das vereinfacht die Sache total, und du brauchst dich zudem auch nicht um die Browserunterschiede zu kümmern.
ein Beispiel zum ausprobieren:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#first").draggable({
      stop : function(){
        var xPos = $("#first").css("left");
        var yPos = $("#first").css("top");
        alert(xPos + "," + yPos);
      }
    });
  });
</script>
<style>
#first{
  height:50px;
  width: 70px;
  background: silver;
}
</style>
<title></title>
</head>

<body>
<div id="first"></div>
</body>
</html>
statt die Daten mit alert auszugeben müsste man hier nur eine funktion ensetzen, die die Daten über ein phpscript in die Datenbank schreibt.

Code:
 $("#first").draggable({
      stop : function(){
macht das element #first draggable, und führt eine funktion aus, wenn das draggen endet.

http://docs.jquery.com/UI/Draggable
 
Zuletzt bearbeitet:

Blackout289

Nicht mehr ganz neu hier

AW: Div verschieben --> Pos in DB speichern

okay, ja ich habs mal mit dem Script versucht. Funktioniert aber leider nicht. Also wenn ich ein "Normales" Div nehme schon. Aber mein Div wird ja erst "eingeblendet", mit dem alten script ging es.
Ich kann die Funktion zwar für das Elterndiv definieren, jedoch ist dann immerschon ein graues vierreck auf der Seite. Öffne ich nun das eigentlich div wird dieses an das bestehende angeheftet un lässt sich demnach auch nur durch anklicken des vierrecks bewegen.

Gibt es sowas wie stop:function nicht im normalen JS?
Wie geschrieben, ich kenne mich damit nicht wirklich aus :D.

Da ich vermutlich einen Kalender mit JQuery realisieren möchte, gibt es schon ein Problem, wegen der oben genannten "einmalnutzung"...jop das wars auch schon :D
Danke^^

Edit: das mit den Browserunterschieden isn argument^^
edit2: btw wie wäre es mit "onmouseup"? Wie rufe ich damit ein php script aus un nutze die Variablen? <---Falls ihr dieser Möglichkeit zustimmt: Ist es sehr schwer alles so zu schreiben, dass es jeder Browser kapiert? :D
 
Zuletzt bearbeitet:

saila

Moderatorle

AW: Div verschieben --> Pos in DB speichern

Naja, wenn du das alles selbst in üblichem JavaScript schreiben möchtest, dann viel Spass und halt dir Termine fern, den die Zeit wirst du brauchen!

Wenn du dir die Zeit nimmst und die UI-Seite von jQuery mal genauer durchiest, stellst du fest, dass dort auch mehrere Beispiele enthalten sind. Darüber hinaus kannst du mit dem jQuery Core und der jQuery UI im Grunde alles umsetzen was einem Desktop sehr nahe kommt.

Um nun eine Box erst später einzublenden, oder nachzuladen gibt es von jQuery mehrere Möglichkeiten. Entweder load(), ajax(), get() oder post(). Alle Methoden laufen entweder über einen Event (also Klick, Mouseover-out-up-down oder was auch immer) oder auch rein beim laden der Seite.

Zu den Positionen der Boxen steht dir wie schon von Sokie vorgeschlagen die Stop-Methode zur Verfügung. innerhalb dieser Methode definierst du die Funktion mit dem Inhalt von z.B. $.ajax(). Übergibst die Boxpositionsdaten und speicherst diese ensprechend über php entweder in der Datenbank, Session oder Datei. Verlässt nun der User die Seite und kommt wieder auf diese zurück, kannst du die Daten bei laufender Session aus der Session nehmen oder von einem anderen Speicherort.
Wichtig wird letztlich, dass diese Boxen als Templates hinterlegt sind und ggf. mit entsprechenden Daten nach dem oder während dem Laden gefüllt werden.

So - nun würde ich sagen du liest dich mal in jQuery und jQuery-UI ein und spielst einfach mal mit dem Gedöhns :)
 

sokie

Mod | Web

AW: Div verschieben --> Pos in DB speichern

joo klingt nich schlecht, aber bei jquery hat ich scho ma das Problem, dass man hier nur ein Plugin pro seite einbinden kann.
Auf der einen Seite verstehe ich nicht, warum du nur ein plugin pro Seite einbinden kannst - ist aber auch nebensächlich - für den Ansatz aus #7 brauchst du kein Plugin.

Das Beispiel aus #7 ist ja auch keine fertige lösung, sondern nur ein Beispiel, wie man positionsdaten mithilfe des (drag)stop: events zur Weiterverarbeitung erhalten kann, und weil ich keine lust hatte dein ganzes script zu schreiben, habe ich es bei dem Beispiel mit dem vorbereiteten div belassen.

So - nun würde ich sagen du liest dich mal in jQuery und jQuery-UI ein und spielst einfach mal mit dem Gedöhns :)

besser kann mans eigentlich nicht sagen.

Alternativ wären vielleicht noch die anderen Frameworks wie YUI,Glow,Dojo,MooTools,prototype etc...
 
Zuletzt bearbeitet:

Blackout289

Nicht mehr ganz neu hier

AW: Div verschieben --> Pos in DB speichern

okay ihr habt mich überzeugt ^^
Hab mich jetzt mal bisschen reingelesen und geschaut, auch mit den Animationsmöglihchkeiten undso..
Werde es mir also die Tage mal anschauen =)
dankeschön^^
 

ak56Lk

Noch nicht viel geschrieben

AW: Div verschieben --> Pos in DB speichern

Probiere doch mal dieses hier aus:


ist allerdings für Prototype und nicht JQuery.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben