Resize an HTML element using touches

Question

Using nothing more than the jQuery lib; I am trying to resize an DIV when dragging it's right border. It works perfectly with a mouse but I can't make it work on a touch device. I think it's related to the e.touches.

I have tryied using e.touches and e.targetTouches; none of them seem to work.

Am i implementing the touch events part right ? What am i missing ?

Here is a fiddle, and the full code below.

HTML:

<div class="container"><div class="handle"></div></div>

CSS:

.container{background:#CCC;width:200px;height:100px;position:relative;overflow:hidden;}
.handle{cursor:e-resize;height:100px;width:2px;position:absolute;top:0;right:0;background:red;}

JS:

var handle = null;

$(".handle").on('mousedown touchstart', function(e){
    handle = {
        x : e.pageX,
        p : $(this).parent(),
        pw: $(this).parent().width()
    };

    if (e.targetTouches){ //e.touches
        handle.x = e.targetTouches[0].pageX //e.touches[0]
    }

    e.preventDefault();
});

$(document).on({
    'mousemove touchmove':function(e){
        if(handle) {
            if (e.targetTouches){ //e.touches
                handle.p.width(handle.pw+(e.targetTouches[0].pageX - handle.x));  //e.touches[0]               
            }else{
                handle.p.width(handle.pw+(e.pageX - handle.x));                    
            }
        }
        e.preventDefault();
    },
    'mouseup touchend':function(e){
        handle = null;
        e.preventDefault();
    }
});

Any help would be appreciated!

Answer 1

Instead of e.targetTouches you should use e.originalEvent.touches.

Allso it would help to have:

• gesturechange event alongside mousemove touchmove
• gestureend event alongside mouseup touchend
• gesturestart event alongside mousedown touchstart

Another improvement would be to on document mousemove event callback move e.preventDefault() in the if statement, that way the user can scroll the page if the handle is null .