Перетаскивание элемента на jQuery

Есть "карта" (.map), внутри неё находится (#chart)

<div class="map">
<div id="chart" data-scale=".6" data-cur-scale=".6" data-scale-step=".2" data-min-scale=".4" style="transform: translate(0, 0) scale(.6)"></div>
</div>

Нужно сделать возможность перетаскивания #chart внутри .map (как гугл карта) Для ПК реализовано следующим образом (всё работает отлично)

$('.map').on('mousedown', function(e) {
        e.preventDefault();
        var moveBlock = $('#chart'),
            blockScale = $('#chart').attr('data-cur-scale'),
            pos = moveBlock.data('lastTransform');
        var posX = pos ? pos.x : 0,
            posY = pos ? pos.y : 0;
        var startX = e.pageX - posX, 
            startY = e.pageY - posY;
        $(document).on("mousemove", function(e) {
            var newDx = e.pageX - startX,
                newDy = e.pageY - startY;
            $('.map').css('cursor', 'grabbing');
            moveBlock.css({
                'transform': 'translate(' + newDx + 'px, ' + newDy + 'px) scale('+ blockScale +')'
            });
            $('#chart').data('lastTransform', {x: newDx, y: newDy});
        });
    });
    $(document).on('mouseup', function(e) {
        $(this).off('mousemove');
        $('.map').css('cursor', 'grab');
    });

Помогите, пожалуйста, тоже самое сделать и для мобильных устройств, для работы с тачскрином