Partage
  • Partager sur Facebook
  • Partager sur Twitter

Drag'N'drop qui ne fonctionne pas

Sujet résolu
    8 février 2010 à 21:53:51

    Salut,
    Voici donc mon problème du jour :-°

    Je veux faire un système de Drag'N'drop.

    Alors je tape ce brouillon :

    function dragNdrop(id, event) {
    	var position_Y = event.clientY;
    	var position_X = event.clientX;
    	document.getElementById(id).onmousemove = function (event){
    		
    	position_Y =  event.clientY+position_Y;
    	document.getElementById(id).style.top =position_Y+'px';
    		
    	position_X = event.clientX-position_X;
    	document.getElementById(id).style.right =position_X+'px';
    	}
    }
    document.getElementById('module_texte').onmousedown =function(event) { dragNdrop('module_texte', event); }
    



    En principe : je clique, et quand je déplace ma sourie vers X pixels vers la droite, la div aussi se déplace vers X pixels vers la droite.

    Mais en pratique, ça va n'importe où... :-°

    Une idée ?
    Merci !
    • Partager sur Facebook
    • Partager sur Twitter
      8 février 2010 à 21:59:45

      Il doit être sur le body le onmousemove.
      • Partager sur Facebook
      • Partager sur Twitter
        8 février 2010 à 22:28:33

        Ouais en principe, tu mets un onmousemove sur le body.

        Lors du mousedown, tu actives un booléen qui va indiquer au onmousemove que t'es en train de cliquer.
        Et au onmouseup, tu remets le booléen à false.
        • Partager sur Facebook
        • Partager sur Twitter
          9 février 2010 à 18:47:14

          Merci tout le monde !
          Ça marche, je donne mon code si ça intéresse :

          function dragNdrop(id, event) {
          	
          	var en_train_dappuier = 1;
          	
          	document.getElementById('body').onmouseup =function()
          	{	
          		en_train_dappuier = 0;
          	}
          
          		/* En, fait X = Largeur depuis la gauche, 
          						Y = Hauteur depuis le haut.
          		*/
          		
          		var position_Y_de_la_div =  document.getElementById(id).offsetTop;
          		var position_Y_de_la_sourie = event.clientY;
          		var position_X_de_la_div =  document.getElementById(id).offsetLeft;
          		var position_X_de_la_sourie = event.clientX;
          		
          		/* On calcule la position de la sourie dans la div */
          		
          		var position_Y_de_la_sourie_dans_la_div = position_Y_de_la_sourie - position_Y_de_la_div;
          		var position_X_de_la_sourie_dans_la_div = position_X_de_la_sourie - position_X_de_la_div;
          		
          		
          
          				
          				document.getElementById('body').onmousemove =function(event) {
          					
          					if(en_train_dappuier)
          					{
          						var position_Y = event.clientY - position_Y_de_la_sourie_dans_la_div;
          						document.getElementById(id).style.top = position_Y+'px';
          						
          						var position_X = event.clientX - position_X_de_la_sourie_dans_la_div;
          						document.getElementById(id).style.left = position_X+'px';
          					
          					}
          					else
          					{
          						return false;
          					}
          					
          					}
          	
          }
          function action_general() {
          
          document.getElementById('module_texte').onmousedown =function(event) { dragNdrop('module_texte', event); }
          
          }
          window.onload = action_general;
          


          <div style="border: 1px solid #ffffff; width: 98%; height: 9%;position: absolute;" id ="module_texte"><p style="margin: 1%; ">Du texte.</p></div>
          
          • Partager sur Facebook
          • Partager sur Twitter

          Drag'N'drop qui ne fonctionne pas

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown