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"); }); }); } }
https://www.nowcoder.com