Drag and Drop

zorro69 · 21.12.2011, 08:37

Hallo,

Mein User sieht eine Seite mit 10 Bildern, von denen er nun eines mit Drag und Drop auswählen kann, und dieses in ein "Zielfeld" schieben soll.

Frage: wie kann ich im Javascript erkennen, welches er genommen hat, damit ich diese Info weiterverarbeiten kann?

wolf29 · 21.12.2011, 08:39

Hi.

Zitat:

Mein User sieht eine Seite mit 10 Bildern, von denen er nun eines mit Drag und Drop auswählen kann, und dieses in ein "Zielfeld" schieben soll.

Frage: wie kann ich im Javascript erkennen, welches er genommen hat, damit ich diese Info weiterverarbeiten kann?

Quellcode + mehr Infos

?!?!?

mfg Wolf29

zorro69 · 21.12.2011, 08:43

nunja, den drag and drop code hab ich gefunden und geguttenbergt

PHP-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";                                          

  }                                                                                        

}

wolf29 · 21.12.2011, 09:13

Tipp: nutze JQuery dafür

http://www.1stwebdesigner.com/freebi...query-plugins/

da findest Du ne Menge Beispiele.

mfg Wolf29

crossfader · 21.12.2011, 09:18

Hallo,
Ich werfe hier auch mal die jQuery UI in den Raum. jqueryui.com

Das sind nochmal Plugins für jQuery - vielleicht hilft dir das ja. Da barauchst du dann nur noch die Events verarbeiten.

Gruß Olli

Gesendet von meinem Desire HD mit Tapatalk

K313 · 21.12.2011, 16:27

brauchst du unbedingt das bild mit functions bewegen oder die ziel ist nur ausgewähltes bild finden?
weil beim drag eines images einige browsers sowieso ein shadow zeigen und andere sogar ein durchsehentliche copy vom bild.
Und wenn dein "Zielfield" ein input/textarea feld ist dann soll dadrin am drop die src ausgewähltes bildes erscheinen, was du beim "onchange" ablesen könnte.

drsoong · 21.12.2011, 18:08

dragobjekt.id vielleicht ?!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JQuery drag n drop	EG2011	JavaScript, Ajax und mehr	2	01.06.2011 23:37
[Erledigt] JQuery Drag & Drop an Flashanimationen	Dopar	JavaScript, Ajax und mehr	7	26.03.2011 11:22
Drag and Drop - Frage	makaay04	JavaScript, Ajax und mehr	11	08.03.2011 18:50
Drag & Drop PHP und, oder HTML Editor gesucht	stemser	PHP Einsteiger	1	09.01.2011 16:22
[Erledigt] HTML5 Drag & Drop Upload	err0r	Gewerblich	0	10.12.2010 14:48
Scriptsuche Slide-Fade Toogle mit Drag and Drop + Cookie Script gesucht	GN	Scriptbörse	1	09.01.2010 00:05
Drag and Drop	Volex	JavaScript, Ajax und mehr	7	02.01.2010 20:37
Drag and Drop	SteiniKeule	Scriptbörse	5	14.08.2009 14:51
Drag and Drop mit PHP und MySQL	Torsten.E	PHP Tipps 2009	16	08.07.2009 17:16
Drag and drop	asdasd	Scriptbörse	3	18.05.2009 18:52
Drag & Drop Begrenzung	Maaax	JavaScript, Ajax und mehr	8	10.05.2009 17:13
Drag & Drop via JQuery & Ajax --> Geht nicht :(	Plague	JavaScript, Ajax und mehr	2	23.10.2008 12:19
Drag ´n Drop per PHP?	Taladan	PHP-Fortgeschrittene	3	26.11.2007 10:14
JavaScript Drag & Drop	lomtas	HTML, Usability und Barrierefreiheit	0	17.04.2006 22:15
drag &amp;amp;amp; drop Position speichern		HTML, Usability und Barrierefreiheit	7	03.11.2004 12:31

21.12.2011, 08:37
zorro69 Neuer Benutzer Registriert seit: 10.12.2011 Beiträge: 17 PHP-Kenntnisse: Anfänger	Drag and Drop Hallo, Mein User sieht eine Seite mit 10 Bildern, von denen er nun eines mit Drag und Drop auswählen kann, und dieses in ein "Zielfeld" schieben soll. Frage: wie kann ich im Javascript erkennen, welches er genommen hat, damit ich diese Info weiterverarbeiten kann?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.12.2011, 08:43
zorro69 Neuer Benutzer Registriert seit: 10.12.2011 Beiträge: 17 PHP-Kenntnisse: Anfänger	nunja, den drag and drop code hab ich gefunden und geguttenbergt PHP-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"; } }

21.12.2011, 09:13
wolf29 Erfahrener Benutzer Registriert seit: 17.03.2010 Beiträge: 1.833 PHP-Kenntnisse: Fortgeschritten	Tipp: nutze JQuery dafür http://www.1stwebdesigner.com/freebi...query-plugins/ da findest Du ne Menge Beispiele. mfg Wolf29 __________________ while (!asleep()) sheep++; Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

21.12.2011, 09:18
crossfader Benutzer Registriert seit: 16.06.2010 Beiträge: 64 PHP-Kenntnisse: Fortgeschritten	Hallo, Ich werfe hier auch mal die jQuery UI in den Raum. jqueryui.com Das sind nochmal Plugins für jQuery - vielleicht hilft dir das ja. Da barauchst du dann nur noch die Events verarbeiten. Gruß Olli Gesendet von meinem Desire HD mit Tapatalk

21.12.2011, 16:27
K313 Benutzer Registriert seit: 18.12.2011 Beiträge: 37 PHP-Kenntnisse: Fortgeschritten	brauchst du unbedingt das bild mit functions bewegen oder die ziel ist nur ausgewähltes bild finden? weil beim drag eines images einige browsers sowieso ein shadow zeigen und andere sogar ein durchsehentliche copy vom bild. Und wenn dein "Zielfield" ein input/textarea feld ist dann soll dadrin am drop die src ausgewähltes bildes erscheinen, was du beim "onchange" ablesen könnte.

21.12.2011, 18:08
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	dragobjekt.id vielleicht ?! __________________ Es ist schon alles gesagt. Nur noch nicht von allen.