Questo sito utilizza cookies, anche di terze parti, per mostrare pubblicità e servizi in linea con il tuo account. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - [JS] Drag and Drop: Problemi input type
Forum - Javascript - [JS] Drag and Drop: Problemi input type

Avatar
oretovalley (Normal User)
Pro


Messaggi: 109
Iscritto: 12/04/2009

Segnala al moderatore
Postato alle 20:50
Lunedì, 11/01/2010
Ciao a tutti, ho scritto una pagina web, dove ci sono vari elementi che possono spostarsi, ma ho un problema. Non riesco a scrivere dentro i campi input type, ritengo xkè al click li trascino solamente, cm posso risolvere il problema ?

Questo è il codice della pagina:

Codice sorgente - presumibilmente Javascript

  1. <html>
  2.         <head>
  3.                
  4.                 <script type="text/javascript" src="drag.js"></script>
  5.                
  6.         <title>Javascript - Drag and Drop</title>
  7.                
  8.                 <style type="text/css">
  9.                                        
  10.                 .drag {
  11.                   position:relative;
  12.                   padding: 5px;          
  13.                   border: 1px solid #04B404;
  14.                   background: #A9F5A9;
  15.                   text-align: center;                                            
  16.                   -webkit-border-radius: 10px;
  17.                 }
  18.                                
  19.                
  20.                 </style>
  21.         </head>
  22.         <body>
  23.    
  24.         <form id="registrazione" action="registrazione.php" method="POST" onSubmit="return validate_form()">
  25.                
  26.             <div class="drag" style="width: 270px;">
  27.                 Nome: 
  28.                 <input type="text" id="nome_input" onblur='javascript:control_dati("nome","nome_input")'>
  29.                 <img id="nome" onclick='javascript:control_error("nome")'>
  30.             </div>
  31.            
  32.             <div class="drag" style="width: 270px;">
  33.                 Cognome: 
  34.                 <input type="text" id="cognome_input" onblur='javascript:control_dati("cognome","cognome_input")'>
  35.                 <img id="cognome" onclick='javascript:control_error("cognome")'>
  36.             </div>
  37.            
  38.             <div class="drag" style="width: 270px;">
  39.                 Data di Nascita: 
  40.                
  41.                 <select id = "giorno">
  42.                    
  43.                     <script type="text/javascript">                                                    
  44.                        
  45.                         for(i = 1;i < 32; ++i)
  46.                             document.write("<option value" + i + ">" + i + "</option");                    
  47.                                    
  48.                     </script>
  49.                  
  50.                 </select>
  51.                
  52.                 <select id = "mese" onblur='javascript:control_data()'>
  53.                            
  54.                     <script type="text/javascript">
  55.                                                    
  56.                         for(i = 1;i < 13;++i)
  57.                             document.write("<option value" + i + ">" + i + "</option");                    
  58.                    
  59.                     </script>
  60.                
  61.                 </select>
  62.                    
  63.                 <select id= "anno" onblur='javascript:control_data()'>
  64.                            
  65.                     <script type="text/javascript">
  66.                    
  67.                         for(i = 1900;i < 2010; ++i)
  68.                             document.write("<option value" + i + ">" + i + "</option");                    
  69.                    
  70.                     </script>
  71.                
  72.                 </select>
  73.                
  74.                 <img id="data_nascita">
  75.             </div>                
  76.            
  77.             <div class="drag" style="width: 270px;">
  78.            
  79.                 Città:
  80.                 <input type="text" id="citta_input" onblur='javascript:control_dati(this.value,"citta","citta_input")'>
  81.                 <img id="citta" onclick='javascript:control_error("citta")'>
  82.            
  83.             </div>
  84.            
  85.             <div class="drag" style="width: 270px;">
  86.            
  87.                 <input type="submit" value="Registrati">
  88.                 <input type="reset" value="Cancella">
  89.            
  90.             </div>
  91.                            
  92.     </body>
  93. </html>



Questo è il codice dello script:

Codice sorgente - presumibilmente Php

  1. var ie=document.all;
  2. var nn6=document.getElementById&&!document.all;
  3. var isdrag=false;
  4. var x,y;
  5. var dobj;
  6.  
  7. function movemouse(e) {
  8.         if (isdrag) {
  9.         dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
  10.         dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
  11.         return false;
  12.         }
  13. }
  14.  
  15. function selectmouse(e) {
  16.         var fobj       = nn6 ? e.target : event.srcElement;
  17.         var topelement = nn6 ? "HTML" : "BODY";
  18.         while (fobj.tagName != topelement && fobj.className != "drag")
  19.                 fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  20.                
  21.         if (fobj.className=="drag") {
  22.                 isdrag = true;
  23.                 dobj = fobj;
  24.                 tx = parseInt(dobj.style.left+0,10);
  25.                 ty = parseInt(dobj.style.top+0,10);
  26.                 x = nn6 ? e.clientX : event.clientX;
  27.                 y = nn6 ? e.clientY : event.clientY;
  28.                 document.onmousemove=movemouse;
  29.                 return false;
  30.         }
  31. }
  32.  
  33. document.onmousedown=selectmouse;
  34. document.onmouseup=new Function("isdrag=false");




PM Quote
Avatar
Mte90 (Member)
Guru


Messaggi: 1144
Iscritto: 25/03/2008

Segnala al moderatore
Postato alle 21:38
Martedì, 12/01/2010
In parole povere tu hai che come uno clicca sull'oggetto questo può essere trascinato?
se ho capito bene puoi fare che cliccando su un bottone per esempio attivi la modalità drag e drop altrimenti se l'asse x e y corrisponde al posto devono stare si attivi la modalità per cliccarli.


http://www.mte90.net/
Kde, Debian e Programmazione web/Desktop!


Linux Counter.li #482442
PM Quote