CODEWITHSUNDEEP
javascriptslider
Adonis Chopper
Adonis Chopper

Reputation: 1

Range slider's thumb out of control

''''

 let drag1 = document.getElementById("circle");
    let drag2 = document.getElementById("circle2");
    let isDragging = false;
    let initialX;

function onMouseDown(e) {
    initialX = e.clientX - drag1.getBoundingClientRect().left;
    isDragging = true;

    function mouseMove(e) {
        if (isDragging && e.buttons===1) {
           e.preventDefault();
           drag1.style.left = e.clientX - initialX + 'px';
        } 
    }
    function mouseUp(e) {
        isDragging = false;
        drag1.removeEventListener("mousemove", mouseMove,true);
        drag1.removeEventListener("mouseup" , mouseUp,true);
    }

    drag1.addEventListener("mouseup", mouseUp,true);
    drag1.addEventListener("mousemove", mouseMove,true);
    e.stopPropagation();
};

drag1.addEventListener("mousedown", onMouseDown);

''''

The situation now is like mouseup event cannot be recognized or the eventListener cannot be removed after the button is really released (before i added the condition e.buttons===1). Before that, when i put the mouse near the indicator(or someone else call it a thumb), the thumb will go right in a short distance. After i add the condition control, it becomes better-at least will not move by itself again when the mouse come close. However, it seems the root cause is still there, the thumb cannot be dragged to left side and it can only be dragged to right side by a little bit distance(same as the distance it moved when i put the mouse close to it.)

Can someone teach me what I've done wrong? I tried several solution to try to solve it however nothing changed. Here below are those action tried.

  1. As I wonder function mouseUp or the EventListener added to it cannot be run normally because of scope issue, so i tried put funtion mouseMove() and mouseUp() out of function onMouseDown(). However nothing changed.

  2. Found a way on web that is adding a mouseleave EventListener for before the stopPropagation but it still fails

  3. Add the .removeEventListener at first sentence in function onMouseDown(). Tried to stop if there is any non-removed Listener, but it still fails

Could any master can save me on this? Thank you so much.

Upvotes: 0

Views: 25

Answers (2)

yuanyxh
yuanyxh

Reputation: 1

You should ensure the mouse cursor remains within the drag1 element upon release, or alternatively reassign mousemove and mouseup event targets to the document when initiating the drag. Refer to Element Plus's implementation for drag handling: element-plus-useDraggable.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #circle {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="circle"></div>

    <script>
      let drag1 = document.getElementById('circle');
      let isDragging = false;
      let initialX;

      function onMouseDown(e) {
        initialX = e.clientX - drag1.getBoundingClientRect().left;
        isDragging = true;

        function mouseMove(e) {
          if (isDragging && e.buttons === 1) {
            e.preventDefault();
            drag1.style.left = e.clientX - initialX + 'px';
          }
        }
        function mouseUp(e) {
          isDragging = false;

          console.log(234);

          window.document.removeEventListener('mousemove', mouseMove, true);
          window.document.removeEventListener('mouseup', mouseUp, true);
        }

        window.document.addEventListener('mouseup', mouseUp, true);
        window.document.addEventListener('mousemove', mouseMove, true);
        e.stopPropagation();
      }

      drag1.addEventListener('mousedown', onMouseDown);
    </script>
  </body>
</html>

Upvotes: 0

Roochiar Fazli
Roochiar Fazli

Reputation: 26

What I am seeing is that there may be two problems

  1. Check if e is always fixed on a tag or does it show child or parent tags as well
  2. The problem may be with the mouse event, use touch and pointer events as well

Make sure you use touch-action too.

Upvotes: 0

Related Questions