Mouvement d'un div avec le click de souris [Résolu]

Signaler
Messages postés
62
Date d'inscription
lundi 10 décembre 2018
Statut
Membre
Dernière intervention
12 août 2020
-
Messages postés
30184
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2020
-
Bonjour ,
Je suis en train de créer une page qui permet de bouger une règle lors de clique de la souris et qui doit etre arreté lorsque le clique de la souris sur l'objet regle arrete (drag), le problème est quand je clique la regle ,
1/ je ne peux pas arreter le mouvement aprés le click
2/ la regle bouge meme sans la cliquer
Je veux juste que la regle bouge seulement quand la fleche du souris est sur la règle et que le bouton gauche de la souris seulement quand il est cliquée permet de bouger la règle

mon code

<script>
    jQuery( document ).ready(function( $ ) {
        var div = document.getElementById('ruler');
        $("#ruler").click(function (){
    document.addEventListener('mouseover',function(e) {			
				div.style.left = e.pageX+"px";
				div.style.top = e.pageY+"px";
			});

        });

        document.addEventListener('click',function(e) {			
				
			});
 
</script>



<div class="tips-triks-area tips-padding">
    <div class="container">
      <!-- Section-tittle -->
      <div class="row d-flex justify-content-center">
        <div class="col-lg-6 col-md-8 pr-0">
          <div class="section-tittle text-center">
            <h5>
              Mesurer avec une règle
            </h5>
          </div>
        </div>
      </div>
      <br><br>
      <div  class="container">
       <hr class="new" style="width:200px; margin: auto;"  />
       
<div id="ruler" class="ruler">
  <ul class="stick-container">
    <li class="stick">
      <ul class="minor-stick-container">
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
      </ul>
      <span class="stick-value">0</span>
    </li>
    <li class="stick">
      <ul class="minor-stick-container">
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
      </ul>
      <span class="stick-value">1</span>
    </li>
    <li class="stick">
      <ul class="minor-stick-container">
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
      </ul>
      <span class="stick-value">2</span>
    </li>
    <li class="stick">
      <ul class="minor-stick-container">
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
      </ul>
      <span class="stick-value">3</span>
    </li>
    <li class="stick">
      <ul class="minor-stick-container">
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
        <li class="minor-stick"></li>
      </ul>
      <span class="stick-value">4</span>
    </li>

  </ul>
</div>
    </div>
    <br><br><br><br><br><br><br><br><br><br>
    <div class="d-inline-flex mb-3">
    <p class="sample-text ">En utilisant la règle , Quelle est la taille ? ?<p>
    </div>
<br>
      
<br>
<div  class="container">
<div class="d-inline-flex mb-3">
                  <div class="col-sm-3">
								<input type="text" id ="lnum" style="border : 2px solid black;width: 100%"  name="lnum" >
                  	</div>
                  <label style="display=inline-block;text-align=right;" for="lnum">cm</label>          
  </div>
  <div class="block">	<button id="valider"  class="genric-btn primary small">valider</button></div>
  <div id="response">
   <div id="html"></div>         
       <div class="block text-center"><button id="ok"  hidden="true" class="genric-btn primary ">ok</button></div>
  </div>
 </div>


capture ecran :

1 réponse

Messages postés
30184
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 novembre 2020
2 978
Bonjour,

regarde ça :
https://jqueryui.com/draggable/