Drag and Drop

E

EIS-TEE

PHP-MySQLi Skill:13%
Hallo Community,

erstmal wünsche ich allen ein frohes neues,
und auch im neuen Jahr gibt es wieder Probleme ohne Ende :D

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:
Alle Daten -Download-


~EIS-TEE
Ich bin zu allem bereit, aber zu nichts zu gebrauchen.
 
Hi,

du musst beim Starten des Bewegungsvorganges das Offset des Cursors zur linken oberen Ecke des Elements berechnen, das bewegt werden soll.

Ein Beispiel findest du auf SelfHTML.

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

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

<script type="text/javascript">
<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4

//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";
  }
}
//-->
</script>

    
</head>

<body onload="draginit()">

   <div id="chat" class="chat_box" onmousedown="dragstart(this)" onmouseup="stop()" >
   
      <img align="right" src="bilder/button.png" />
   
   </div>

</body>
</html>

Das Drag&Drop Rad wurde schon das ein oder andere mal erfunden:


http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/

Stupide kopiert und auf dein div element angewand.

Vielleicht interessiert dich ja auch folgendes:

http://jqueryui.com/demos/draggable/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück