simple drag across from left to right with touch functionality

Question

I was wondering if there's a drag functionality for touch that's not using jQuery UI that can be used alongside this code below, or if this code may be modified to include code for touch.

The plugin, modified for personal use: (https://github.com/scazzy/jQuery-Draggable)

$.fn.draggable = function (opt) {
    var prevX=0;
    var base = this;
    var settings = {
        handle: "",
        cursor: "move",
        axis: null,
        containParent: false
    };
    opt = $.extend(settings, opt);

    if (opt.handle === "") {
        var $el = base;
    } else {
        var $el = base.find(opt.handle);
    }
    return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
        if (opt.handle === "") {
            var $drag = $(this).addClass('draggable');
        } else {
            var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
        }
        var z_idx = $drag.css('z-index'),
            drg_h = $drag.outerHeight(),
            drg_w = $drag.outerWidth(),
            pos_y = $drag.offset().top + drg_h - e.pageY,
            pos_x = $drag.offset().left + drg_w - e.pageX;
        var parent = $(this).parent();
        var parW = parent.width(),
            parH = parent.height();
        var parX1 = parseInt(parent.offset().left) + parseInt(parent.css('padding-left').replace('px', '')),
            parX2 = parX1 + parW,
            parY1 = parseInt(parent.offset().top) + parseInt(parent.css('padding-top').replace('px', '')),
            parY2 = parY1 + parH;
        $drag.css('z-index', 1000).parents().on("mousemove", function (e) {
            var off_top = e.pageY + pos_y - drg_h,
                off_left = e.pageX + pos_x - drg_w,
                offst = null;
            if (opt.containParent === true) {
                if (off_left > parX2 - drg_w) {
                    off_left = parX2 - drg_w;
                    window.location = $('.draggable').attr('href');
                }
                if (off_top < parY1) {
                    off_top = parY1;
                }
                if (off_top > parY2 - drg_h) {
                    off_top = parY2 - drg_h;
                }
                if(prevX < off_left) {
                    prevX = off_left;
                }
                if(prevX >= off_left) {
                    off_left = prevX;
                }
                if (off_left < parX1) {
                    off_left = parX1;
                }
                if (off_left < parX2 - drg_w) {
                    var imgWidth = $('.draggable').position();
                    $('.draggable').siblings('img').css('width', imgWidth.left);
                    var imgHeight = $('.draggable').siblings('img').height();
                    $('.draggable').parent('.divider').css('height', imgHeight+'px');
                }
            }

            if (opt.axis == "x") {
                offst = {
                    left: off_left
                };
            } else if (opt.axis == "y") {
                offst = {
                    top: off_top
                };
            } else {
                offst = {
                    left: off_left,
                    top: off_top
                };
            }
            $('.draggable').offset(offst);
            $('.draggable, html').on("mouseup", function () {
                $drag.parents().off('mousemove');
                $($el).removeClass('draggable').css('z-index', z_idx);
            });
        });
        e.preventDefault(); // disable selection
    }).on("mouseup", function () {
        if (opt.handle === "") {
            $(this).removeClass('draggable');
        } else {
            $(this).removeClass('active-handle').parent().removeClass('draggable');
        }
        $el.off('mousedown', function (e) {
            e.preventDefault()
        });
    });
}

Calling the plugin:

/* end scissors plugin, start scissors */
$('.scissors').click(function(e){e.preventDefault();});
$(".scissors").draggable({
    containParent: true,
    axis: 'x',
    cursor: 'e-resize'
});

The HTML:

<div class="divider">
<a href="" title="Drag to view the puzzle" class="scissors"></a>';
<img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" />
</div>

The CSS:

.divider { margin: 40px 0; border-top: 1px dashed #1abff0; background: #fff; position: relative; }
.scissors { position: relative; display: inline-block; top: 0; }
.scissors:after { width: 22px; height: 16px; content: "\e606"; font-family: 'icomoon', Arial, Helvetica, sans-serif; font-size: .7em; position: absolute; left: -22px; top: -29px; color: #232323; z-index: 1000; }
.scissors.draggable:after { content: "\e605"; }
.divider img { position: absolute; top: 0; max-height: none !important; z-index: 0; }

You may see it in action here (drag the scissors): http://playfuldevotions.com

This works well with mouse gestures but not touch.

Thanks in advance!

Answer 1

Here's the answer I found: Javascript Drag and drop for touch devices

I ended up deleting the event.preventDefault(); So like this:

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

Then I called init() in document.ready before the draggable plugin that I mentioned in my initial question. That works like a charm.