jquery - 通过触摸功能简单地从左向右拖动

Question

我想知道是否有不使用 jQuery UI 的触摸拖动功能可以与下面的代码一起使用，或者是否可以修改此代码以包含触摸代码。

插件，为个人使用而修改: ( 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()
        });
    });
}

调用插件:

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

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>

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

您可以在此处看到它的实际效果(拖动剪刀): http://playfuldevotions.com

这适用于鼠标手势，但不适用于触摸。

提前致谢!

Answer 1

这是我找到的答案: Javascript Drag and drop for touch devices

我最终删除了 event.preventDefault();所以像这样:

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

然后我在最初的问题中提到的可拖动插件之前调用了 document.ready 中的 init()。这就像一个魅力。