Geek asks and answers

Touch Screen Drag

I was looking for a clear guide to the work of these events, and now I am more confused than when I started.

Some functions of my site are related to drag and drop. Currently, mobile devices (or anything without a mouse) are supported by the user selecting an item, click the Move button, and then tap the drop point. Although this works quite well (the elements are on a visible grid), it is not quite as convenient as drag and drop.

My initial understanding is that wherever I assign element.onmousedown, element.onmousemoveand element.onmouseup, I can simply assign the same handler element.ontouchstart, element.ontouchmoveand element.ontouchendaccordingly.

However, this leaves the following questions:

  • How to get the coordinates of the touch point and what is it relative?
  • Will the view (the default drag and drop action) be displayed, and if so, is it canceled?
  • How can I avoid interfering with multi-touch actions, for example, squeeze to enlarge if one finger is on the dragged item?
+5
source share
3 answers

You can determine the coordinates by measuring the width / height of the device (window.innerHeight / window.innerWidth).

This article is a good starting point for sensory events and overriding them: http://www.html5rocks.com/en/mobile/touch/

. , :  ( )  if (event.touches === 1)

0

, , , , , click/drag () , . p >

, "touchstart" "mousedown" :

 document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);

mousemove (touchmove) mouseup (touchhend).

, , :

  var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value

, , , undefined, .

, , , .

+4

The following is a brief overview of the differences between the screen coordinates of the mobile phone and the desktop: What is the difference between screenX / Y, clientX / Y and pageX / Y?

And a working example of an event listener implementation touchmove:

 this.canvas.addEventListener("touchmove", function(e) {
        e.preventDefault();
        touchPosition(e);
    }, false);

var getCanvasPos = function(el) {
    var canvas = document.getElementById(el) || this.getCanvas();
    var _x = canvas.offsetLeft;
    var _y = canvas.offsetTop;

    while(canvas = canvas.offsetParent) {
        _x += canvas.offsetLeft - canvas.scrollLeft;
        _y += canvas.offsetTop - canvas.scrollTop;
    }

    return {
        left : _x,
        top : _y
    }
};

var touchPosition = function(e) {
    var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
    var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
    return {
        x : mouseX,
        y : mouseY
    };
};
0
source

More articles:


All Articles