html 드래그 앤 드롭 위치 질문입니다.

Question

안녕하세요.구글에서 html 드래그 앤 드롭 검색하면 나오는 예제를 가지고 하는데요,div안에서 특정 위치(div 왼쪽 상단)로 밖에 가지 않더라구요.혹시 해당 div안에 아무 위치로나 이동 시킬 수 있는 방법이 있을까요? div css입니다. 드래그 앤 드롭을 위한 script 구요 html에서 div입니다.이미지 src는 신경쓰지 말아주세요!

감사합니다.

ondaa · Accepted Answer

가능할지는 모르겠습니다만 ^^;; 어림잡아 설명드리자면 음 옮기려는 box가 relative 이기 때문에 box 안에서의 위치를 잡아주어야 합니다.다시말해 html 문서 전체에서가 아닌 box 안에서의 위치를 잡아야 한다는거죠.onmousemove 를 box 안에 주면 그 안에서의 mouse 위치를 알 수 있습니다. 이렇게 하면 대충 이미지가 놓일 위치가 잡힐 겁니다.그러면 이제 x(left) 와 y(top) 가 계산 되었으니 이미지 태그에 css 를 줍시다.만약 마우스 정중앙으로 놓이게 하고 싶다면 x - 이미지width / 2 를 하면 되겠죠. y 도 마찬가지구요 만약 그래도 모르시겠다면 제가 직접 테스트 해보고 댓글 달아 드리겠습니다.

ondaa · Answer

기본적인 틀에 position: relative 를 주고 옮기려는 태그에 position: absolute 를 줍니다. 그리고 drop 할때 마우스 위치 가져와서이미지를 옮기려는 틀안에 top , left 를 다시 지정해주면 되지 않을까요??

마크쓰리 · Answer

NoDe이미지를 옮기려는 틀안에 top , left 를 다시 지정해주면 되지 않을까요??가 무슨 말씀이신지 모르겠습니다 ㅠㅠ..top , left가 어떤 속성?을 말씀하시는 건지요..?

마크쓰리 · Answer

NoDe옮기려는 박스, right가 relative가 되고 기존 박스, left가 absolute가 되는거죠?찾아보니 offset으로 top와 left를 구할수 있더라구요.답변 해주신대로 해보겠습니다. 감사합니다!

ondaa · Answer

넵 그걸로 구할 수 있긴한데 지금 해보니 잘안되네요 ^^;; 알고리즘을 좀 잘 짜야할듯 합니다.

마크쓰리 · Answer

NoDe아하..!!방법을 알았으니 여러가지 시도해보겠습니다 감사합니다..!!

html 드래그 앤 드롭 위치 질문입니다.

6개의 답변

Q&A 목록