Moving columns on iPad does not work (e.pageX, e.pageY are not defined) · angular-ui/ui-grid#4400

(1 comment) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import

good first issuegrid-move-columnstype: bug

Description

When you try to move a column on iPad (try Column Moving demo in Tutorial) it just does not work. The problem is that e.pageX, e.pageY are not defined in 'touch...' events. You have to instead use this code:

var pointerEventToXY = function(e){
        var out = {
          x: 0, 
          y: 0
        };

        if (e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
            var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            out.x = touch.pageX;
            out.y = touch.pageY;
        } 
        else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type == 'mouseout' || e.type == 'mouseenter' || e.type == 'mouseleave') {
            out.x = e.pageX;
            out.y = e.pageY;
        }

        return out;
    };

And you call it like this:

    var pageXY = pointerEventToXY(e);
    var pageX = pageXY.x;
    var pageY = pageXY.y;

I would recommend looking for all instances of e.pageX and e.pageY (I found 5 in current version) and replace them with the code above.

Contributor guide

Tech stack: javascriptangular
Domain: frontend
Issue type: bug
Difficulty: 2
Estimated time: under 1 hour
Activity status: stale
Clarity: clear
Prerequisites: Basic JavaScriptUnderstanding of touch events
Newbie friendliness: 85
Research direction: The issue identifies a bug where e.pageX and e.pageY are undefined for touch events on iPad, preventing column moving. The solution involves creating a helper function to get coordinates from touch events and replacing all instances in the codebase. The contributor should search for e.pageX and e.pageY in the source files, particularly in column moving related modules, and implement the pointerEventToXY function as described. After the fix, test on touch devices to ensure column moving works.