В настоящее время я пытаюсь создать редактируемую область, которая будет отображаться на изображении на веб-сайте покупок.
Цель состоит в том, чтобы получить изображение с коробкой, которую можно перемещать и изменять размер, используя Реагируйте.
Я следовал учебнику javascript по этому вопросу на YouTube, однако он не работает так, как я ожидал.
Ниже приведен код, который я использую:
import React, { useState } from "react";
import axios from "axios";
import Delete from "../Buttons/Delete";
import Picture from "../Picture/Picture";
function EditableImageUploader(props){
const [ loading, setLoading ] = useState(false);
const editableArea = document.querySelector(".editableArea");
const pictureEdit = document.querySelector(".pictureEdit");
const uploadImage = async e => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'charlotte-co')
setLoading(true)
axios.post('https://api.cloudinary.com/v1_1/charlotte-co/image/upload', data)
.then(res => {
setLoading(false);
props.setImages([...props.images, res.data]);
})
.catch(err =>console.log(err));
}
function moveDiv(e){
window.addEventListener("mousemove", mouseMove);
window.addEventListener("mouseup", mouseRelease);
let prevX = e.clientX;
let prevY = e.clientY;
function mouseMove(e){
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
console.log(prevY)
console.log(`Y = ${e.clientY}`)
console.log(prevX)
console.log(`X = ${e.clientX}`)
const rect = editableArea.getBoundingClientRect()
editableArea.style.left = (rect.left - newX) + "px";
editableArea.style.top = (rect.top - newY) + "px";
}
function mouseRelease(){
window.removeEventListener("mousemove", mouseMove);
window.removeEventListener("mouseup", mouseRelease);
prevX = e.clientX;
prevY = e.clientY;
}
}
return(<>
<div className="image-uploader">
{(props.images)?"":(<input
type="file"
name="file"
placeholder="Upload a File"
className="uploader"
onChange={uploadImage}
/>)}
<div>
{loading ? (
<h4>loading...</h4>
):""}
{(props.images)?(
props.images.map(image => {
return (<>
<Delete
delete={image.public_id}
deleteFrom={props.images}
setDeleteFrom={props.setImages}
/>
{
} <Picture
className="pictureEdit"
publicId={image.public_id}
version={image.version}
width="300"
quality="100"
/>
<div
className="editableArea"
onMouseDown={(e)=> moveDiv(e)}
>
<div className="resizer north"></div>
<div className="resizer west"></div>
<div className="resizer south"></div>
<div className="resizer east"></div>
The transfer will spread across this box.
</div>
</>)
})
):(<p>No blank image available currently. Upload one to make this option available.</p>)}
</div>
</div>
</>)
}
export default EditableImageUploader;
А вот соответствующий CSS:
.editableArea{
position: absolute;
background-color: green;
height: 150px;
width: 150px;
border-style: solid;
border-color: black;
border-width: 5px;
z-index: 5;
cursor: move;
}
Это позволит вам перемещать div и измените свою позицию, но она перемещается так далеко от того места, где она была первоначально расположена.
Мне кажется, я думаю, что это связано с тем, где страница прокручивается, но я очень не уверен, почему она реагирует так, как она is.
Когда консоль читает:
653
Y = 653
325
X = 367
Фактическая позиция редактируемой области:
left: 1005.55px;
top: -12346.8px;
Любая помощь и / или объяснение того, как и почему это работает так, как оно есть, и как решить эту проблему, будет с благодарностью.