Изменение размера элемента HTML с помощью касаний

Использование только jQuery lib; Я пытаюсь изменить размер DIV при перетаскивании его правой границы. Он отлично работает с мышью, но я не могу заставить его работать на сенсорном устройстве. Я думаю, это связано с e.touches .

Я пробовал использовать e.touches и e.targetTouches ; ни один из них, кажется, не работает.

Правильно ли я реализую часть событий касания ? Что мне не хватает?

Вот скрипт и полный код ниже.

HTML:

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();
    }
});

Любая помощь приветствуется!