tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
1004
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 01.01.10 13:32 #1
    EIS-TEE EIS-TEE ist offline PHP-MySQLi Skill:13%
    Registriert seit
    Dec 2009
    Beiträge
    17
    Hallo Community,

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

    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

    <!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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

    <!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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

    <!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.
     
    Zitieren Zitieren
  2. 01.01.10 14:44 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 01.01.10 14:52 #3
    Avatar von rd4eva
    rd4eva rd4eva ist offline Mitglied Brillant
    Registriert seit
    Feb 2003
    Beiträge
    756
    HTML-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>

   
   <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/artik...t/draganddrop/

    Stupide kopiert und auf dein div element angewand.

    Vielleicht interessiert dich ja auch folgendes:

    http://jqueryui.com/demos/draggable/
     
    In order to understand recursion, one must first understand recursion.
    Zitieren Zitieren
« Link erst anklickbar wenn Seite komplett fertig geladen ist | Bilderrahmen Online um Bild setzen + Bildbearbeitung »

Ähnliche Themen

  1. Drag n Drop
    Von kerstel im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 21.01.10, 13:36
  2. Drag & Drop
    Von muga im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 03.08.09, 17:42
  3. SWT Drag&Drop
    Von HuberDe im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 27.09.07, 08:15
  4. Drag & Drop mit <tr> ?!
    Von ev0lst im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.08.07, 10:23
  5. SWT: Ghosted Drag-Image bei Drag & Drop
    Von snake_plissken im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 15.04.06, 23:36