>source

현재 쇼핑 웹 사이트의 사진에 표시 할 편집 가능한 영역을 만들려고합니다.

목표는 React를 사용하여 이동할 수 있고 크기를 조정할 수있는 상자가있는 그림을 만드는 것입니다.

나는 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를 이동하고 위치를 변경할 수 있지만 원래 위치에서 멀리 떨어져 있습니다.

나는 이것이 페이지가 스크롤되는 곳 때문이라고 생각하지만 왜 그것이 어떻게 반응하는지 잘 모르겠습니다.

콘솔에 다음과 같이 표시됩니다.

653
Y = 653
325
X = 367

편집 가능 영역의 실제 위치는 다음과 같습니다.

left: 1005.55px; 
top: -12346.8px;

이것이 어떻게, 왜 작동하는지, 그리고이 문제를 해결하는 방법에 대한 모든 도움이나 설명은 대단히 감사하겠습니다.


  • 답변 # 1

    계산에 offsetTop 및 offsetLeft를 포함하는 것을 고려하십시오. 예를 들어 div가 페이지 너비와 높이의 100 %를 차지하지 않는 경우 clientX 및 clientY 함수가 실제로 화면에서 마우스의 위치를 ​​반환하고 서로 관련이 없기 때문에 다른 결과를 얻는 것은 정상입니다. DOM 요소. 이 기사가 도움이 될 것입니다. 브라우저의 뷰포트를 기준으로 요소의 상단 위치를 얻는 방법은 무엇입니까?

    또한 고려해야 할 또 다른 사항은 드래그를 시작할 때 요소가 클릭되는 정확한 위치입니다. 예를 들어 설명 할 수 있습니다. 드래그를 시작할 때 중간 (가로 및 세로 모두)에있는 요소를 클릭했다고 가정 해보십시오. 계산이 끝나면 얻을 위치가 상단과 왼쪽으로 설정됩니다. 이 오프셋이 없으면 요소는 마우스를 놓은 위치에 배치되지 않지만 약간 (또는 많이, 요소의 크기에 따라 다름) 이동합니다.

    몇 가지 코드로 도와 드리고 싶지만 리소스 (이미지) 및 axios 호출을 포함하여 많은 논리를 가지고 있기 때문에 어려울 것입니다. 이런 종류의 논리를 잘라 내고 일부 이미지를 하드 코딩하고 온라인 편집기와 컴파일러에 코드를 추가하고 링크를 설정하면 코드에 대해서도 도움을 드리겠습니다.

    다른 질문이 있으면 기꺼이 도와 드리겠습니다.

  • 이전 Java - 자바 - pojo로 키 및 값을 사용하여지도 데이터 구조에서 csv를로드하는 방법 :지도
  • 다음 python - typeerror - 'id'필드에 숫자가 필요하지만