I’m trying to save div position in place that I’m closing it, so after I reopen that div it will appear in place it was when I clicked CLOSE button. I’ve tried set style with js setAttribute() in dragMoveListener function, using props in styled components and passing them to Window styled.div with useState hook and none of it worked Here’s the code:
Dragging.js:
import interact from "https://cdn.interactjs.io/v1.10.11/interactjs/index.js";
import styled from "styled-components";
const Window = styled.div`
position: fixed;
width: 500px;
height: 300px;
border-radius: 8px;
border: solid black;
padding: 20px;
background-color: white;
color: black;
z-index: 10;
touch-action: none;
box-sizing: border-box;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
`;
const Dragging = ({ children }) => {
interact(".resize-drag")
.resizable({
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move(event) {
var target = event.target;
var x = parseFloat(target.getAttribute("data-x")) || 0;
var y = parseFloat(target.getAttribute("data-y")) || 0;
target.style.width = event.rect.width + "px";
target.style.height = event.rect.height + "px";
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.transform = "translate(" + x + "px," + y + "px)";
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
},
},
modifiers: [
interact.modifiers.restrictSize({
min: { width: 200, height: 200 },
}),
],
inertia: true,
})
.draggable({
inertia: true,
autoScroll: true,
listeners: {
move: dragMoveListener,
},
});
function dragMoveListener(event) {
var target = event.target;
var x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
var y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
target.style.transform = "translate(" + x + "px, " + y + "px)";
target.setAttribute("data-x", x);
target.setAttribute("data-y", y);
}
return <Window className="resize-drag">{children}</Window>;
};
export default Dragging;
DeviceModal.js:
import React, { useEffect, useState } from "react";
import { Loader, Button, Header } from "semantic-ui-react";
import styled from "styled-components";
import DeviceInfo from "./DeviceInfo";
import Dragging from "./Dragging";
const WindowBody = styled.div`
padding: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
`;
const DeviceModal = (props) => {
const [data, setData] = useState();
const id = props.id - 1;
useEffect(() => {
const fetchDevice = async () => {
try {
const response = await fetch(
`http://localhost:5000/api/v1/devices/${id}`
);
const responseData = await response.json();
setData(responseData);
} catch (err) {
if (err.value) {
console.log(err);
}
}
};
fetchDevice();
}, [id]);
if (!props.show) {
return null;
}
if (data) {
return (
<Dragging>
{
<>
<Header>Info:</Header>
<WindowBody>
<DeviceInfo data={data} />
</WindowBody>
<Button style={{ padding: "2px" }} onClick={props.onClose}>
CLOSE
</Button>
</>
}
</Dragging>
);
} else {
return <Dragging>{<Loader />}</Dragging>;
}
};
export default DeviceModal;
I tried lot of things but none of those worked so please help.
