jquery ui draggable 组件支持在scale的容器中

话痨

公司要开发一个类似datav的画布组件。整体框架采用的Vue，拖拽缩放这块使用的jquery ui。
在开发中，发现画布大小是设置的，然后通过容器的大小去将实际的画布大小进行缩放，在画布上就会使用到scale属性，然而发现，加了之后就是个坑，jquery ui 的拖拽，缩放都出现了问题，然后发现就是因为缩放之后导致偏移量不一直造成的。

拖拽

从最开始原生入手，看是否可以解决，于是有了如下代码：

发现是可以解决的，需要将缩放比例进行计算下。

到这OK，所实话，自己去写一个比较完善的拖拽也是比较花时间，所以还是想直接在jquery ui上能否直接解决。

查看源码，发现有这么一行代码：

    _mouseDrag: function(event, noPropagation) {
        // reset any necessary cached properties (see #5009)
        if ( this.offsetParentCssPosition === "fixed" ) {
            this.offset.parent = this._getParentOffset();
        }

        //Compute the helpers position
        this.position = this._generatePosition(event);
        this.positionAbs = this._convertPositionTo("absolute");

        //Call plugins and callbacks and use the resulting position if something is returned
        if (!noPropagation) {
            var ui = this._uiHash();
            if(this._trigger("drag", event, ui) === false) {
                this._mouseUp({});
                return false;
            }
            this.position = ui.position;
        }
        // 问题就在这个地方,position这个保存了拖拽元素的实际位置，然而是不计算scale这比例的
        if(!this.options.axis || this.options.axis !== "y") {
            this.helper[0].style.left = this.position.left +"px";
        }
        if(!this.options.axis || this.options.axis !== "x") {
            this.helper[0].style.top = this.position.top+"px";
        }
        if($.ui.ddmanager) {
            $.ui.ddmanager.drag(this, event);
        }

        return false;
    },

既然知道了position的问题，那么我直接在这个地方加上计算的缩放比例，成功解决了拖拽时候偏移的问题。接下来就是缩放比例会动态变动，需要暴露一个接口出去可以去设置这个缩放比例，既然思路对了就去干，等会上代码。

        var o = this.options
        if(!this.options.axis || this.options.axis !== "y") {
            this.helper[0].style.left = this.position.left / o.scale +"px";
        }
        if(!this.options.axis || this.options.axis !== "x") {
            this.helper[0].style.top = this.position.top / o.scale +"px";
        }

唉，拖拽解决了，缩放这又是个坑，同样思路走不通了，明天再踩~~

缩放

开始沿用拖拽思路发现怎么改都不对，后面发现在方法:_mouseDrag中里面就计算了移动变量，那么直接在这个地方进行就改就好了，修改完成之后，完美~~~