Ignore up and down mouse down events

Question

I've written my first npm library called flix slider (https://www.npmjs.com/package/flix-slider) which is kinda based on the Netflix style slider. The designer wanted the slider to behave in a certain way and I couldn't find anything that did what I needed so built one from scratch.

Everything works well except when it comes to dragging and touch drag. I need to somehow disable/ignore if the user drags up or down. Currently, if they drag up or down it triggers a left or right drag. I've been looking at this all day I can't for the life of me figure out how to stop it lol

Im able to get work out if the user is scrolling up or down but im not sure how to use that information to stop the left and right functions from triggering.

$(document).on('mousemove', function (e) {
          dragMove(e)
        })

var dragMove = function (e) {
          if (oldPageY > e.pageY) {
            limit = true
          }

          if (dragging) {
            // console.log(oldPageY, e.pageY)

            if (oldPageX < e.pageX) {
              xDirection = 'next drag'
              if (limit) {
                $(fsTrack).addClass('fs-being-dragged') // disable items from being clicked
                nextItem(dragItemsToMove)
                limit = false
              }
              oldPageX = e.pageX - pageXOffset
            } else {
              xDirection = 'prev drag'
              if (limit) {
                $(fsTrack).addClass('fs-being-dragged') // disable items from being clicked
                prevItem(dragItemsToMove)
                limit = false
              }
              oldPageX = e.pageX + pageXOffset
            }

            return false
          }
        }

Ultimately what im trying to achieve is only allowing the user to mousemove left or right. i.e. have the user mousedowned -> are they moving left or right -> call functions

ctaleck · Accepted Answer · 2019-08-29T06:33:02.163

Currently, if they drag up or down it triggers a left or right drag.

Here is a snippet that ignores up or down movement by tracking the MouseEvent.movementX property of the event only.

const ERROR_MARGIN = 3;

function dragMove(event) {
  console.log(event.originalEvent.movementX);

  setClear();
  var action = event.originalEvent.movementX < -ERROR_MARGIN ?
    "left" :
    event.originalEvent.movementX > ERROR_MARGIN ?
    "right" :
    "";

  $("#action").text(action);
}

$("#fsTrack").mousedown(function(e) {
  console.log(e.originalEvent.movementX);
  var action = e.originalEvent.movementX < 0 ? "left" : "right";
  if (action === "left" || action === "right") {
    console.log("drag start")
    $("#fsTrack").on('mousemove', dragMove);
  }
});

$("#fsTrack").mouseup(function(e) {
  console.log("drag stop");
  $("#fsTrack").off("mousemove", dragMove);
});

function setClear() {
  if (window.timeout !== undefined) {
    window.clearTimeout(timeout);
  }
  window.timeout = window.setTimeout(function() {
    $("#action").text("");
  }, 100);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>movement: <span id="action">stopped</span></div>
<div id="fsTrack" style="width:400px;height:40px;background-color:red;"></div>

Ive tried wrapping this around my mousedown drag function but it's still triggering if I click then scroll up or down? $(fsTrack).mousedown(function (e) { var action = e.originalEvent.movementX < 0 ? "left" : "right"; if (action === "left" || action === "right") { console.log('l or r') dragStarted(e) } }) — eyebonk, Aug 29 '19 at 06:00
I don't suppose you know what the touch equivalent of e.originalEvent.movementX would be? — eyebonk, Sep 01 '19 at 23:57

Ignore up and down mouse down events

1 Answers1