Question 287258 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – touchstart event missing information on server

I am trying to implement drag and drop functionality using javscript and following code is working fine in my local but, it is not working in the server. Debug information is given below:

$(document).on("mousedown touchstart", "#canvas", function (evt) {
    //ClearCanvas();
    var canvasSide = isMobile ? 320 : 600;
    if ($("img").is(":animated") === false) {
      var iconSize = canvasSide / board.boardSize;
      var xCoord, yCoord;

      if (evt.type === "mousedown") {
        xCoord = evt.offsetX;
        yCoord = evt.offsetY;
      } else {console.log(evt.type);console.log(evt);
        xCoord =
          parseInt(evt.touches[0].clientX) -
          (parseInt(evt.target.offsetLeft) +
            parseInt(evt.target.offsetParent.offsetLeft));
        yCoord =
          parseInt(evt.touches[0].clientY) -
          (parseInt(evt.target.offsetTop) +
            parseInt(evt.target.offsetParent.offsetTop));
      }

      var col = Math.floor(xCoord / iconSize);
      var row = Math.floor(yCoord / iconSize);

      var img = document
        .querySelectorAll("[data-position='" + col + "-" + row + "']")
        .item(0);

      if (img != null) {
        $(img).css("z-index", 2);

        var top = parseInt($(img).css("top"));
        var left = parseInt($(img).css("left"));

        dragDropInfo = {
          candyImg: img,
          initCol: col,
          initRow: row,
          initTop: top,
          initLeft: left,
          initXCoord: xCoord,
          initYCoord: yCoord,
        };
      }
    }
});

Error is throwing at ‘evt.touches[0]’. Because evt does’t have touches information in server.

Local:
enter image description here

Server:
enter image description here

Tags:

2

Answers


  1. 0

    Try this bellow:

    $(document).on("mousedown touchstart", "#canvas", function (evt) {
    var canvasSide = isMobile ? 320 : 600;

    if ($("img").is(":animated") === false) {
        var iconSize = canvasSide / board.boardSize;
        var xCoord, yCoord;

        if (evt.type === "mousedown") {
            xCoord = evt.offsetX;
            yCoord = evt.offsetY;
        } else if (evt.touches && evt.touches.length > 0) {
            xCoord = evt.touches[0].clientX - (parseInt(evt.target.offsetLeft) + parseInt(evt.target.offsetParent.offsetLeft));
            yCoord = evt.touches[0].clientY - (parseInt(evt.target.offsetTop) + parseInt(evt.target.offsetParent.offsetTop));
        } else {
            console.log("Unsupported touch event");
            return;
        }

        var col = Math.floor(xCoord / iconSize);
        var row = Math.floor(yCoord / iconSize);

        var img = document
            .querySelectorAll("[data-position='" + col + "-" + row + "']")
            .item(0);

        if (img != null) {
            $(img).css("z-index", 2);

            var top = parseInt($(img).css("top"));
            var left = parseInt($(img).css("left"));

            dragDropInfo = {
                candyImg: img,
                initCol: col,
                initRow: row,
                initTop: top,
                initLeft: left,
                initXCoord: xCoord,
                initYCoord: yCoord,
            };
        }
    }
});
    Login or Signup to reply.
  2. 0

    You can grab the originalEvent from your screenshot. If all you care is to grab the first touch point regardless, blast it with chaining:

    const getClient(evt, XorY) => evt?.touches?.[0]?.[`client${XorY}`] 
?? evt?.targetTouches?.[0]?.[`client${XorY}`] 
?? evt?.originalEvent?.touches?.[0]?.[`client${XorY}`] 
?? evt?.originalEvent?.targetTouches?.[0]?.[`client${XorY}`]

//usage
let clientX = getClient(evt, "X");

    do the above for both Y and X. For instance your xCoord would be:

    xCoord = parseInt(getClient(evt, "X")) -
         (parseInt(evt.target.offsetLeft) +
         parseInt(evt.target.offsetParent.offsetLeft))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search