Mouvement d'un div avec le click de souris

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 :