元素拖拽缩放的jquery插件

将元素拖拽缩放功能代码封装为jquery插件

/**
 *jquery插件编写 
 *元素拖拽，鼠标滚轮缩放比例
 *by：xb
 使用方法： $('#demoDiv').drag({
			axis:'x',
			wheel:true,
            start: function () {
                console.log('start后执行');
            },
            drag: function () {
                console.log('move后执行');
            },
			stop:function(){
				console.log('stop后执行');
			}
	});
 **/
;
(function ($, window) {
    function DragImg(ele, option) {

        this.isdrag = false;
        this.clicky = 0;
        this.clickx = 0; //初始点击点
        this.oDragObj = null; //操作对象

        this.$element = ele;
        this.defaults = {
            axis: 'x,y',
            wheel: false,
            start: function () {},
            drag: function () {},
            stop: function () {} //操作完成后，用户自定义方法
        };
        this.options = $.extend({}, this.defaults, option);
        this.disableSelect();
        this.initBgDiv(); //底层图拖拽
        if (option.wheel) {
            this.initMouseWheel(); //底层图鼠标滚轮缩放
        }
    }

    DragImg.prototype = {
        constructor: DragImg,
        initBgDiv: function () { //底层图拖拽
            var self = this;

            var bg_div = this.$element;
            bg_div.on('mousedown', initDrag);
            document.onmouseup = function (ev) {

                self.options.stop.call(this, ev, this);

                self.isdrag = false;
                bg_div.onclick = null;
                document.onmousemove = null;
            };
            var nTX = 0,
                nTY = 0;

            function initDrag(e) {
                if (e.button == 0) {
                    self.isdrag = true;
                    nTY = parseInt(bg_div.css('top')); //运动开始时的位置
                    nTX = parseInt(bg_div.css('left'));
                    self.clickx = e.clientX;
                    self.clicky = e.clientY; //点击位置

                    document.onmousemove = moveMouse;

                    self.options.start.call(this, e, this);

                    return false;
                }
            }

            function moveMouse(e) {
                if (self.isdrag) { //初始位置+运动距离-点击时位置
                    var oevent = e || window.event;
                    var clientX = oevent.clientX,
                        clientY = oevent.clientY;
                    var moveX = nTX + clientX - self.clickx,
                        moveY = nTY + clientY - self.clicky;
                    if (self.options.axis.indexOf('x') != -1) {
                        bg_div.css('left', moveX);
                    }
                    if (self.options.axis.indexOf('y') != -1) {
                        bg_div.css('top', moveY);
                    }

                    self.options.drag.call(this, e, this);

                    return false;
                }
            }
        },

        initMouseWheel: function () { //底层图鼠标滚轮缩放
            var bg_img = this.$element;
            var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
            bg_img.on(mousewheelevt, onWheelZoom);

            function onWheelZoom(e) {
                zoom = bg_img.css('transform').split('(')[1].split(')')[0].split(',')[0] * 1; //缩放比例
                var wheelDelta = event.wheelDelta ? (event.wheelDelta / 120) : (-event.detail / 3);

                tZoom = zoom + (wheelDelta > 0 ? 0.1 : -0.1);
                // console.log('tZoom: ', tZoom);
                if (tZoom < 0.2 || tZoom > 1.5) {
                    return true;
                }
                bg_img.css({
                    "transform": "scale(" + tZoom + ',' + tZoom + ")",
                    '-moz-transform': 'scale(' + tZoom + ',' + tZoom + ')',
                    '-ms-transform': 'scale(' + tZoom + ',' + tZoom + ')'
                });
                e.stopPropagation();
                return false;
            }
        },

        disableSelect: function () {
            this.$element.css({
                '-webkit-touch-callout': 'none',
                '-webkit-user-select': 'none',
                '-khtml-user-select': 'none',
                '-moz-user-select': 'none',
                '-ms-user-select': 'none',
                'user-select': 'none'
            });
        }
    };
    $.fn.extend({
        drag: function (options) {
            var dragImg = new DragImg(this, options);
            return dragImg;
        }
    });
})(jQuery, window);