弹出框移动、放大、缩小、最大化处理

function getViewportSize() {
    //可视区域的宽度和高度
    return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    };
}

class LayerMove {
    /**
     * 弹层移动
     * @param $setCanMoveAreaName 鼠标点击哪个区域可以移动容器
     * @param $moveContainerName 要移动的容器
     */
    static execute($setCanMoveAreaName, $moveContainerName, $iframe) {
        let viewport = getViewportSize();
        $setCanMoveAreaName.mousedown(function (e) {
            e.stopPropagation();
            e.preventDefault();
            let x = e.clientX - $moveContainerName.offset().left;
            let y = e.clientY - $moveContainerName.offset().top;
            $(`#${$iframe}`).find('iframe')[0].contentWindow.init(x, y);
            $(document).mousemove(function (e) {
                let left = e.clientX - x;
                let top = e.clientY - y;
                let currentLeft = viewport.width - $moveContainerName.width();
                let currentTop = viewport.height - $moveContainerName.height();
                left = left < 0 ? 0 : left;
                left = left > currentLeft ? currentLeft : left;
                top = top < 0 ? 0 : top;
                top = top > currentTop ? currentTop : top;
                $moveContainerName.css({left: left + "px", top: top + "px"});
            });
            $(document).mouseup(function () {
                $(this).unbind("mousemove");
                $(`#${$iframe}`).find('iframe')[0].contentWindow.removeMouseMove();
                $(document).unbind("mouseup");
            });
        });
    }
}

/**
 *
 */
class LayerZoom {

    static execute($zoomContainerName, isEnlarge) {
        if (isEnlarge) {
            $zoomContainerName.css({position: "absolute", left: 0, top: 0, width: "100%", height: "100%"});
        } else {
            $zoomContainerName.css({position: "absolute", left: "15%", top: "15%", width: "70%", height: "70%"});
        }
    }

}

class LayerHandZoom {
    static execute($setCanZoomAreaName, $moveContainerName) {
        let viewport = getViewportSize();
        $setCanZoomAreaName.mousedown(function (e) {
            let x = e.clientX - $moveContainerName.width();
            let y = e.clientY - $moveContainerName.height();
            $(document).mousemove(function (e) {
                let width = e.clientX - x + "px";
                let height = e.clientY - y + "px";
                width = width < 0 ? 0 : width;
                width = width > viewport.width ? viewport.width : width;
                height = height < 0 ? 0 : height;
                height = height > viewport.height ? viewport.height : height;
                $moveContainerName.css({width: width, height: height});
            });
            $(document).mouseup(function () {
                $(document).unbind("mousemove");
            });
        });
    }
}