|
@@ -85,24 +85,35 @@ export default defineComponent({
|
|
document.addEventListener("mousemove", handleDragMouseMove);
|
|
document.addEventListener("mousemove", handleDragMouseMove);
|
|
document.addEventListener("mouseup", handleDragMouseUp);
|
|
document.addEventListener("mouseup", handleDragMouseUp);
|
|
// console.log(e);
|
|
// console.log(e);
|
|
- const { offsetX, offsetY } = e;
|
|
|
|
- mousePosition.offsetX = offsetX;
|
|
|
|
- mousePosition.offsetY = offsetY;
|
|
|
|
|
|
+ const { clientX, clientY } = e;
|
|
|
|
+ mousePosition.offsetX = clientX;
|
|
|
|
+ mousePosition.offsetY = clientY;
|
|
};
|
|
};
|
|
const handleDragMouseMove = (e: MouseEvent) => {
|
|
const handleDragMouseMove = (e: MouseEvent) => {
|
|
const { clientX, clientY } = e;
|
|
const { clientX, clientY } = e;
|
|
const windowWidth = window.innerWidth;
|
|
const windowWidth = window.innerWidth;
|
|
const windowHeight = window.innerHeight;
|
|
const windowHeight = window.innerHeight;
|
|
- const newXRatio = (clientX - mousePosition.offsetX) / windowWidth;
|
|
|
|
- const newYRatio = (clientY - mousePosition.offsetY) / windowHeight;
|
|
|
|
|
|
+ const newXRatio =
|
|
|
|
+ parseFloat(positionStyle.left) / 100 +
|
|
|
|
+ (clientX - mousePosition.offsetX) / windowWidth;
|
|
|
|
+ const newYRatio =
|
|
|
|
+ parseFloat(positionStyle.top) / 100 +
|
|
|
|
+ (clientY - mousePosition.offsetY) / windowHeight;
|
|
// console.log({
|
|
// console.log({
|
|
// offsetX: mousePosition.offsetX,
|
|
// offsetX: mousePosition.offsetX,
|
|
// offsetY: mousePosition.offsetY,
|
|
// offsetY: mousePosition.offsetY,
|
|
// newYRatio,
|
|
// newYRatio,
|
|
// newXRatio,
|
|
// newXRatio,
|
|
// });
|
|
// });
|
|
- positionStyle.top = newYRatio * 100 + "%";
|
|
|
|
- positionStyle.left = newXRatio * 100 + "%";
|
|
|
|
|
|
+ if (newYRatio > 0 && newYRatio < 0.95) {
|
|
|
|
+ positionStyle.top = newYRatio * 100 + "%";
|
|
|
|
+ }
|
|
|
|
+ if (newXRatio > 0 && newXRatio < 0.95) {
|
|
|
|
+ positionStyle.left = newXRatio * 100 + "%";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ mousePosition.offsetX = clientX;
|
|
|
|
+ mousePosition.offsetY = clientY;
|
|
};
|
|
};
|
|
const handleDragMouseUp = (e: MouseEvent) => {
|
|
const handleDragMouseUp = (e: MouseEvent) => {
|
|
mousePosition.offsetX = 0;
|
|
mousePosition.offsetX = 0;
|