Drag And Drop wie bei Lima
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktualisieren
besuchen
betrieb
code
editor
einkauf
element
erstellen
freund
funktion
http
interessante sache
koordinate
legen
nutzen
prototyp
teil
url
verstehen
ziehen
-
Hallo Leute
Ich möchte gerne eine Einsatzplanung für meinen Betrieb scripten und da dachte ich mir, dass ich das mit AJAX mache also JS und PHP.
Und ich wollte "Bausteine" als Mitarbeiter verwenden, die man dann in die einzelnen Tage stecken kann.
Jetzt hab ich mir gedacht, "Guckste dir das mal bei Lima an" Nur da blicke ich so ungefähr gar nicht durch.
Jetzt ist meine Frage...
Kennt jemand ein Tut, wo NUR die Drag and Drop Funktion wie bei Lima ist... ohne den "AJAX" teil, also dass man die Blöcke verschieben kann, diese aber nicht gespeichert werden, weil ich hab da bei der Speicherroutine meine eigene gecodet, die ich auch verstehe.
Das Script sollte von der Funktion wie bei Lima sein, wenns geht, also keine feste Höhe der Boxen in die die anderen blöcke rein kommen, weil das doch recht störend ist.
und eventuell erwähnen, wo ich dann meine Ajaxfunktion einbauen müsste, damit die änderungen sofort gespeichert werden.
Ich bin nämlich in der reinen Materie JavaScript noch Anfänger.
Gruß
Technofan
PS: Google hab ich schon gefragt, die machen das aber alle mit JQuery und Prototyp, was bei meiner taktik aber nicht klappt. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nutz einfach Scriptaculous, dann musst du dich nicht um das ganze Event Gedöhns das beim IE und Firefox in zwei verschiedenen Richtungen verläuft kümmern.
-
Als ich das Thema gelsen habe ist mir der Gedanke gekommen, dass ich das vor ein paar Tagen auch noch lernen wollte, ahbe es aber vergessen. Jetzt habe ich das gefunden:http://www.online-im-park.de/2008/01/25/ajax-tutorial-drag-drop-mit-prototypescriptaculous-ganz-einfach/
Aber irgendwie bekomme ich nichtmal das richtig hin. Also ich kann einen Text bewegen, aber nicht woanderst hinlegen. Von PHP bekomme ich kein "Signal", ich habe veruscht die beidet mit Get übergebenen Vairablen auszugeben, aber irgenwie muss ich was falsch gemacht haben...
Kannst du mich bitte per PN anschreiben, wenn du ein funktionierendes Script gebastelt hast?
mfg drafed-map -
@drafed:
Hast du dir mal Scriptaculous geladen und die Examples angeschaut? ich finde anhand derer kann man relativ leicht verstehen wie man die Drag & Drop Funktion nutzen kann.
Ich hab vor einiger Zeit damit einen "Online Einkaufs-Regaltest" für den Betrieb in dem ich arbeite erstellen müssen. War ne interessante Sache.
Ansonsten empfehle ich das Wiki von Scriptaculous zu besuchen: http://wiki.github.com/madrobby/scriptaculous
Und hier zum Draggable.
http://wiki.github.com/madrobby/scriptaculous/draggable
Draggable und Dropable sind eure Freunde. Elemente die man ziehen kann werden mit Dragable angesprochen und die Elemente auf die man was legen will mit Droppable ;) -
evil-devil schrieb:
@drafed:
Hast du dir mal Scriptaculous geladen und die Examples angeschaut? ich finde anhand derer kann man relativ leicht verstehen wie man die Drag & Drop Funktion nutzen kann.
Ich hab vor einiger Zeit damit einen "Online Einkaufs-Regaltest" für den Betrieb in dem ich arbeite erstellen müssen. War ne interessante Sache.
Ansonsten empfehle ich das Wiki von Scriptaculous zu besuchen: http://wiki.github.com/madrobby/scriptaculous
Und hier zum Draggable.
http://wiki.github.com/madrobby/scriptaculous/draggable
Draggable und Dropable sind eure Freunde. Elemente die man ziehen kann werden mit Dragable angesprochen und die Elemente auf die man was legen will mit Droppable ;)
Freunde sind gut... und wie kann ich das ganze ohne prototyp nutzen???
Hab ja meine eigene Ajaxroutiene, die um ein vielfaches Einfacher und dynamischer ist... finde ich...
denn das "onlineprogramm" baut komplett darauf auf... viele teile der Homepage werden permanent neu geladen und geprüft.
da kann man net mal eben auf prototyp umstellen -
Geht parallel nutzen nicht?
Ansonsten hilft wie schon gefordert von dir nur selbst schreiben.
Erstmal beim OnMouseDown Event das Element und die Koordinaten holen und solange MouseDown aktiv ist, die Koordinaten des Elements aktualisieren. Hauptproblem ist wie schon weiter oben erwähnt die Eventverarbeitung. Da Bubble Down bzw. Bubble Up behandelt werden müssen und dazu gibt es zu viel Lektüre ^^"
Bei einem anderen Projekt sollte Anfangs auch ein Drag'n Drop möglich sein... letzten Endes wurde das gestrichen. Aber zum Bubble Down/Up Problem hatte ich damals den folgenden Code im Netz gefunden.
Es bleibt aber weiterhin nicht ganz unkompliziert meiner Meinung nach. Alternativ kannst du auch in den Scriptaculous Code luschern ;)
if (e.preventDefault) { e.preventDefault(); } else { e.cancelBubble = true; return false; } -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> .drag{ position:relative; cursor:move; z-index: 100; } </style> <script type="text/javascript"> /*********************************************** * Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(e){ var evtobj=window.event? window.event : e this.targetobj=window.event? event.srcElement : e.target if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} this.offsetx=parseInt(this.targetobj.style.left) this.offsety=parseInt(this.targetobj.style.top) this.x=evtobj.clientX this.y=evtobj.clientY if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(e){ var evtobj=window.event? window.event : e if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" return false } } } dragobject.initialize() </script> <title>Drag n Drop</title> </head> <body> <br> <img class="drag" style="width: 214px; height: 214px;" alt="" src="bild.gif"><br> <br> <b class="drag">Drag </body> </html> -
Das müsste nur noch Z-Index behandeln, dann wäre es nahezu perfekt.
-
Jetzt muss das nurnoch so bearbeitet werden, dass es nurnoch feste "Steckplätze" gibt... wie bei Lima halt...
-
Wo ist denn Drag & Drop hier?
-
vercetti schrieb:
Wo ist denn Drag & Drop hier?
Wenn du auf der Startseite in den Editor gehst:
http://www.lima-city.de/homepage/editor
(waren das wirklich mehr als 15 Zeichen!?) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
