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