基於 jQuery 使用 transform 進行拖拽

代碼片段

/**
 * Created by JounQin on 16/6/2.
 */
+function ($) {
    +function () {
        var EVENTS = [{
                start: 'mousedown',
                move: 'mousemove',
                end: 'mouseup'
            }, {
                start: 'touchstart',
                move: 'touchmove',
                end: 'touchend'
            }],
            touchSupport = 'undefined' !== typeof window.ontouchstart;

        $.EVENT = EVENTS[+touchSupport];

        $.originalEvent = function (e) {
            return touchSupport ? e.originalEvent.changedTouches[0] : e.originalEvent;
        };
    }();

    $.fn.extend({
        getTranslate: function () {
            var matrix = this.css('transform');

            if (!matrix.indexOf('matrix3d')) {
                var translate = this.getTranslate3d();
                return {
                    x: translate.x,
                    y: translate.y
                };
            } else if (-1 === matrix.indexOf('matrix')) {
                return {x: 0, y: 0};
            }

            var matrixArr = matrix.substring(7, matrix.length - 1).split(',');
            return {
                x: +matrixArr[4],
                y: +matrixArr[5]
            }
        },
        getTranslate3d: function () {
            var matrix = this.css('transform');

            if (-1 === matrix.indexOf('matrix3d')) {
                return $.extend({z: 0}, this.getTranslate());
            }

            var matrixArr = matrix.substring(9, matrix.length - 1).split(',');
            return {
                x: +matrixArr[12],
                y: +matrixArr[13],
                z: +matrixArr[14]
            }
        },
        moveTranslate: function () {
            var DEFAULT_OPTIONS = {
                x: true,
                y: true
            };
            return function (options) {
                options = $.extend({}, DEFAULT_OPTIONS, options);

                var self = this,
                    eventParam = {
                        relatedTarget: this[0]
                    },
                    startEvent = $.Event('translate.start', eventParam),
                    moveStartEvent = $.Event('translate.move.start', eventParam),
                    movingEvent,
                    moveEndEvent,
                    endEvent = $.Event('translate.end', eventParam);

                return self.on($.EVENT.start, function (e) {
                    self.trigger(startEvent);

                    if (startEvent.isDefaultPrevented()) return;

                    var oe = $.originalEvent(e),
                        target = e.currentTarget;
                    target._clientX = oe.clientX;
                    target._clientY = oe.clientY;
                    target._translate = $(target).getTranslate3d();

                    e.preventDefault();
                }).on($.EVENT.move, function (e) {
                    self.trigger(moveStartEvent);

                    if (moveStartEvent.isDefaultPrevented()) return;

                    var oe = $.originalEvent(e),
                        target = e.currentTarget,
                        clientX = oe.clientX,
                        clientY = oe.clientY,
                        originalClientX = target._clientX,
                        originalClientY = target._clientY,
                        originalTranslate = target._translate,
                        $target = $(target);

                    if (!originalTranslate) return;

                    var translateX = options.x ? originalTranslate.x + clientX - originalClientX : originalTranslate.x,
                        translateY = options.y ? originalTranslate.y + clientY - originalClientY : originalTranslate.y,
                        translateZ = originalTranslate.z;

                    movingEvent = $.Event('translate.moving', $.extend({
                        translateX: translateX,
                        translateY: translateY
                    }, eventParam));

                    self.trigger(movingEvent);

                    if (movingEvent.isDefaultPrevented()) return;

                    translateX = movingEvent.translateX;
                    translateY = movingEvent.translateY;

                    $target.css({
                        transform: 'translate3d(' + translateX + 'px,' + translateY + 'px,' + translateZ + 'px)'
                    });

                    moveEndEvent = $.Event('translate.move.end', $.extend({
                        translateX: translateX,
                        translateY: translateY
                    }, eventParam));

                    self.trigger(moveEndEvent);
                }).on($.EVENT.end, function (e) {
                    self.trigger(endEvent);

                    if (endEvent.isDefaultPrevented()) return;

                    var target = e.currentTarget;
                    delete target._clientX;
                    delete target._clientY;
                    delete target._translate;
                });
            }
        }()
    });
}(jQuery);

文章來源：