Drag and Drop

Volex · 01.01.2010, 12:48

Hallo,

vor ab, wünsche ich allen ein "frohes Neues"

Um in diesen Jahr Streitigkeiten zu vermeiden,
werde ich jetzt immer direkt beischreiben was ich suche,
und was ich garnicht gebrauchen kann.

Was ich garnicht gebrauchen kann:
User die keine Ahnung haben aber trotzdem Posten,
User die mich auf andere Seiten oder Scripte verweisen.
Und keine Antworten wie "Da fehlt dir die Erfahrung"

Was ich suche:
Vernünftige Diskussionen, über bestehende Probleme.

Mein Anliegen:
Ich versuche gerade eine Drag und Drop Funktion zu basteln,
dafür schreibe ich mir erstmal eine Event Überwachung,
die die Position von meinen Mauszeiger überwacht (bis hierhin einfach):

Code:

<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
   
   function maus_position(ergebnis){
   
      if(!ergebnis){
	  
	   ergebnis = window.event;
	  
	  }
	  
	  wertx = ergebnis.clientX;
	  
	  werty = ergebnis.clientY;
	  
	  document.getElementById("ausgabex").innerHTML = wertx;
	  
	  document.getElementById("ausgabey").innerHTML = werty;
   
   }
document.onmousemove = maus_position;
</script>

</head>

<body>

<table>
<td><b>Weite:</b></td><td id="ausgabex"></td>
<tr>
<td><b>Höhe:</b></td><td id="ausgabey"></td>
</tr>
</table>
</body>
</html>

Um sicherzugehen das alles so klappt wie ich mir das vorstelle,
habe ich mir eine Div Box erstellt, die sich bei gedrückter Maustaste bewegt(auch das funktioniert reibungslos):

Code:

<!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=utf-8" />
<title>Javascript-Chat</title>

   <script type="text/javascript">
   
      function hover_on(){
	  
	     document.images[0].src="bilder/button_hover.png";
	     document.images[0].style.cursor = "move";
	  }
	  
	  function hover_off(){
	  
	     document.images[0].src="bilder/button.png";
	  
	  }
	  
	  function bewegen(){
	  
	     document.getElementById("chat").style.top = "300px";
		 
		 document.getElementById("chat").style.left = "300px";
	  
	  }

   </script>
   
   <style type="text/css">
   
      .chat_box{
	  background:url(bilder/content.png) no-repeat;
	  width:517px;
	  height:334px;
	  position:relative;
	  }
   
   </style>
    
</head>

<body>

   <div id="chat" class="chat_box">
   
      <img onmouseover="hover_on()" onmousedown="bewegen()" onmouseout="hover_off()" align="right" src="bilder/button.png" />
   
   </div>

</body>
</html>

Nur das dort noch feste Daten stehen,
meine Idee die festen Daten durch die Daten der Positionsangaben der Maus zu ersetzen,
das ganze sieht dann bei mir so aus:

Code:

<!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=utf-8" />
<title>Javascript-Chat</title>

   <script type="text/javascript">
   
      function maus_position(ergebnis){
   
         if(!ergebnis){
	  
	        ergebnis = window.event;
	  
	     }
	  
	     wertx = ergebnis.clientX;
	  
	     werty = ergebnis.clientY;
	  
	     document.getElementById("ausgabex").innerHTML = wertx;
	  
	     document.getElementById("ausgabey").innerHTML = werty;
   
      }

      function hover_on(){
	  
	     document.images[0].src="bilder/button_hover.png";
	     document.images[0].style.cursor = "move";
	  }
	  
	  function hover_off(){
	  
	     document.images[0].src="bilder/button.png";
	  
	  }
	  
	  function bewegen(){
	  
	     document.getElementById("chat").style.top = werty + "px";
		 
		 document.getElementById("chat").style.left = wertx + "px";
	  
	  }

   document.onmousemove = maus_position;
   
   </script>
   
   <style type="text/css">
   
      .chat_box{
	  background:url(bilder/content.png) no-repeat;
	  width:517px;
	  height:334px;
	  position:relative;
	  }
   
   </style>
    
</head>

<body>

   <div id="chat" class="chat_box">
   
      <img onmouseover="hover_on()" onmousedown="bewegen()" onmouseout="hover_off()" align="right" src="bilder/button.png" />
   
   </div>

</body>
</html>

Das ganze geht nur nicht so wie ich das will,
wo habe ich den Fehler gemacht,
momentan springt bei jedem Mausklick die Box ein bisschen weiter weg

Hier mal das ganze Script mit Bildern zum Download:

chat.rar ... at uploaded.to - Free File Hosting, Free Image Hosting, Free Music Hosting, Free Video Hosting, ...

gruß.Volex

Lollix · 01.01.2010, 17:08

HI, ich bin mir nicht sicher, aber bei

Code:

 document.onmousemove = maus_position;

würde ich mal zumindest versuchen ein maus_position(); zu machen. Ich sehe sonst keinen Fehler im Script.

nikosch · 01.01.2010, 17:28

Zitat:

würde ich mal zumindest versuchen ein maus_position(); zu machen.

Das kann eigentlich so nicht klappen.
maus_position(); weist das Ergebnis der Funktion zu, maus_position; die Funktion selbst. Das ist ein wichtiger Unterschied.

@Volex: Warum benutzt Du nicht bspw. jQuery, was solche Aktionen schon wegen seines Eventhandlings wesentlich vereinfacht?

Weitere Anmerkung:
- Bemerkungen wie "Dir fehlt die Erfahrung" sind meist berechtigt. Ob Du solche Antworten bekommst, kannst DU Dir nicht aussuchen.
- Links auf andere Themen sind berechtigt, weil im Netz nicht jede Information tausend mal neu wiedergekäut werden müssen. Dazu wurde schließlich das Linkkonzept im Web erfunden. Ob Du solche Antworten bekommst, kannst DU Dir nicht aussuchen.
- "User die keine Ahnung haben aber trotzdem Posten". Auch darauf hast Du keinen Einfluss. Dass Du das nochmal gesagt hast, wird daran nichts ändern.

Kurzum: Bitte überlasse moderative Aufgaben uns Moderatoren!

Volex · 01.01.2010, 18:15

@nikosch wie gut das funktioniert zeigt ja die vergangenheit,
ich frage etwas, erwarte eine gescheite diskussion, aber bekomm Antworten wie "schaffst du eh nicht" HALLO da packt man sich doch an den Kopf,
dann sagt man den User das er nur scheiße labbert, und zack Thema wird geschlossen,
und ich hab garnichts davon,
da ist es mir lieber keiner Antwortet als das ich mich über so einen scheiß aufregen musss

Nachtrag:
ich Code lieber alles alleine um ein besseres verständnis für die Materie zu bekommen,
da sind sachen wie JQuery fehl am Platz...

@Lollix bei einer Event Überwachung darf man keine Geschweiften Klammern benutzen, für nachfolgende leser:

Das Problem liegt daran das beim klicken (onmousedown) auf die neue Position gesprungen wird, und onmousedown so den focus verliert,
man muss also erstmal die top und left Position des aktuellen Element errechnen,
damit sich erst dann was bewegt wenn auch die Maus bewegt wird,
Mein Code so wie er da steht macht aber keinen Sinn,
ich werde das ganze noch einmal Coden und wenn es fertig ist hier rein Posten

gruß.Volex

nikosch · 01.01.2010, 18:26

Bereits wenn Du einem Element mehr als nur ein Event zuweisen willst, wird der Code wesentlich komplexer. Nur mal so für den Eindruck: http://www.php.de/tutorials/44167-js...tenmodell.html (JS: Einführung - Javascript im Schichtenmodell)
JS ist durch seine nicht-linearen Events, durch seine Closures, Prototypen, ... schon syntaktisch weit komplexer als bspw. PHP.
Es ist also keine Schande, keine Schwäche, ... eine Codebibliothek zu benutzenm um sich die Arbeit zu erleichtern. Im Gegenteil ist das schlicht zeitgemäß.
Wenn Du es darauf anlegst, alles alleine zu programmieren, dann liegt noch ein langer Lernprozess vor Dir. Und wenn Du den hier im Forum vollziehst, wirst Du mehr als einmal die ungeliebten Antworten erhalten. Nochmal: Du kannst Dir die Antworten nicht aussuchen, allenfalls möglichst gut zu beantwortende Fragen stellen.

Volex · 01.01.2010, 18:32

Okay das wird man so nie ganz beschränken können,
aber ich hoffe doch dadurch zumindest den ein oder anderen vom Spamen abzuhalten

Ja ist ein harter lern Prozess, aber das Produktive Arbeiten später ist mir wichtiger, als das bisschen lernen jetzt.
sowas verlernt man nicht und im vergleich zu PHP ändert sich Javascript nicht ständig,
ist also wie Fahrad fahren einmal richtig lernen und man hat was fürs leben gemacht

gruß.volex

nikosch · 01.01.2010, 18:40

Wenn Du es wirklich lernen willst, wirf mal einen Blick hierein: php.de's JavaScript Bookmarks on Delicious. Und zusätzliche empfehle ich Dir Kalendertürchen 24 (24: Ein Guru für alle Fälle).

Javascript zu sprechen ist sehr hilfreich zum Verständnis von Ajax oder JS-Frameworks. Trotzdem wirst Du irgendwann einen Punkt erreichen, an dem Du einsiehst, dass man ohne Framework einfach das Rad immer und immer wieder neu erfindet. Und nicht zuletzt ist das auch eine wirtschaftliche Entscheidung.

nikosch · 02.01.2010, 20:37

Drag and Drop - html.de Forum - HTML für Anfänger & Fortgeschrittene

Bitte beachten: Anmerkungen zu Crosspostings

[MOD: Thread geschlossen]

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
[Erledigt] Drag & Drop Koordinaten übergeben	HaWa-Services	JavaScript, Ajax und mehr	4	13.11.2009 00:18
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
Elemente an einer x beliebigen Stelle positionieren	phpbeginner	HTML, Usability und Barrierefreiheit	7	24.08.2006 17:48
JavaScript Drag & Drop	lomtas	HTML, Usability und Barrierefreiheit	0	17.04.2006 22:15
[Erledigt] Drag &amp;amp;amp;amp; Drop		Off-Topic Diskussionen	4	30.03.2006 12:23
[Erledigt] Drag &amp;amp; Drop Bilder		HTML, Usability und Barrierefreiheit	4	16.05.2005 22:34
drag &amp;amp;amp; drop Position speichern		HTML, Usability und Barrierefreiheit	7	03.11.2004 12:31


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

01.01.2010, 17:08
Lollix Erfahrener Benutzer Registriert seit: 25.04.2009 Beiträge: 201 PHP-Kenntnisse: Anfänger	HI, ich bin mir nicht sicher, aber bei Code: document.onmousemove = maus_position; würde ich mal zumindest versuchen ein maus_position(); zu machen. Ich sehe sonst keinen Fehler im Script. __________________ Privatsphäre war gestern, denn: Bundestrojaner 2.0: Die neue Version ist da.

01.01.2010, 18:15
Volex Benutzer Registriert seit: 21.11.2009 Beiträge: 32 PHP-Kenntnisse: Anfänger	@nikosch wie gut das funktioniert zeigt ja die vergangenheit, ich frage etwas, erwarte eine gescheite diskussion, aber bekomm Antworten wie "schaffst du eh nicht" HALLO da packt man sich doch an den Kopf, dann sagt man den User das er nur scheiße labbert, und zack Thema wird geschlossen, und ich hab garnichts davon, da ist es mir lieber keiner Antwortet als das ich mich über so einen scheiß aufregen musss Nachtrag: ich Code lieber alles alleine um ein besseres verständnis für die Materie zu bekommen, da sind sachen wie JQuery fehl am Platz... @Lollix bei einer Event Überwachung darf man keine Geschweiften Klammern benutzen, für nachfolgende leser: Das Problem liegt daran das beim klicken (onmousedown) auf die neue Position gesprungen wird, und onmousedown so den focus verliert, man muss also erstmal die top und left Position des aktuellen Element errechnen, damit sich erst dann was bewegt wenn auch die Maus bewegt wird, Mein Code so wie er da steht macht aber keinen Sinn, ich werde das ganze noch einmal Coden und wenn es fertig ist hier rein Posten gruß.Volex Geändert von Volex (01.01.2010 um 18:16 Uhr). Grund: Nachtrag

01.01.2010, 18:26
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Bereits wenn Du einem Element mehr als nur ein Event zuweisen willst, wird der Code wesentlich komplexer. Nur mal so für den Eindruck: http://www.php.de/tutorials/44167-js...tenmodell.html (JS: Einführung - Javascript im Schichtenmodell) JS ist durch seine nicht-linearen Events, durch seine Closures, Prototypen, ... schon syntaktisch weit komplexer als bspw. PHP. Es ist also keine Schande, keine Schwäche, ... eine Codebibliothek zu benutzenm um sich die Arbeit zu erleichtern. Im Gegenteil ist das schlicht zeitgemäß. Wenn Du es darauf anlegst, alles alleine zu programmieren, dann liegt noch ein langer Lernprozess vor Dir. Und wenn Du den hier im Forum vollziehst, wirst Du mehr als einmal die ungeliebten Antworten erhalten. Nochmal: Du kannst Dir die Antworten nicht aussuchen, allenfalls möglichst gut zu beantwortende Fragen stellen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

01.01.2010, 18:32
Volex Benutzer Registriert seit: 21.11.2009 Beiträge: 32 PHP-Kenntnisse: Anfänger	Okay das wird man so nie ganz beschränken können, aber ich hoffe doch dadurch zumindest den ein oder anderen vom Spamen abzuhalten Ja ist ein harter lern Prozess, aber das Produktive Arbeiten später ist mir wichtiger, als das bisschen lernen jetzt. sowas verlernt man nicht und im vergleich zu PHP ändert sich Javascript nicht ständig, ist also wie Fahrad fahren einmal richtig lernen und man hat was fürs leben gemacht gruß.volex

01.01.2010, 18:40
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wenn Du es wirklich lernen willst, wirf mal einen Blick hierein: php.de's JavaScript Bookmarks on Delicious. Und zusätzliche empfehle ich Dir Kalendertürchen 24 (24: Ein Guru für alle Fälle). Javascript zu sprechen ist sehr hilfreich zum Verständnis von Ajax oder JS-Frameworks. Trotzdem wirst Du irgendwann einen Punkt erreichen, an dem Du einsiehst, dass man ohne Framework einfach das Rad immer und immer wieder neu erfindet. Und nicht zuletzt ist das auch eine wirtschaftliche Entscheidung. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.01.2010, 20:37
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Drag and Drop - html.de Forum - HTML für Anfänger & Fortgeschrittene Bitte beachten: Anmerkungen zu Crosspostings [MOD: Thread geschlossen] __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --