♣ 실전웹개발 장바구니 드래그 질문 하나드리겠습니다

[열매]

드래그를 해서 상품을 추가중인데 드래그를 하면 저렇게 기존이미지도 이동을 해버리네요...
분명히 저는 93번라인에서 temp라는 변수에 e.target(클릭한 상품의 모든 데이터)이라는 값을 넣었으니 이제 temp와 e.target은 별개의 값이라고 생각하는데 왜 append(temp)를 했음에도 불구하고 저렇게 이미지가 이동할까요? 

어느 부분을 수정하면 사진이 그대로 남아있을까요?

[codingapple]

이미지에 이벤트리스너붙이면 원본이 안남을 수도 있습니다 박스에 붙여봅시다 

[열매]

말씀대로 img가 들어있는 부분을 앞뒤로 <div> 감싸보았는데,
 <div></div>

그럼에도 e.target을 console.log 찍으면

라고 나오네요 ㅠㅠ... 제가 놓친게 있을까요..?
 

[codingapple]

$(검은큰박스).on('dragover', function(e){
        e.preventDefault();
      });

이런것도 추가해봅시다 

[열매]

선생님, 공교롭게도 이미 89번라인에 해당 코드가 적용되어 있습니다 ㅠㅠ...

그래서 제가 정말 좋지않은 코드를 짜보았습니다
dataset.id를 이용하여 img를 새로 가져오는건 어떨까 싶어서 사진과 같은 코드를 짰는데
사진을 드래그하면서 또 이상현상이 발생합니다
오른쪽 모습은, 처음에 1번사진을 드래그한뒤, 두번째로 4번사진을 드래그 한 모습입니다
이상하게 1번이 딸려나오네요...
1번사진드래그 후 2번사진드래그하면 1,2 사진이 생기고, 그 후 3번사진을 드래그하면 1,2,3 사진이 생깁니다... 

어디가 잘못된 걸까요...?

이 질문을 마지막으로 해당 이슈와 관련하여 더이상 질문드리지 않도록 하겠습니다

[codingapple]

이제 이미지는 드래그해도 원본은 잘 있나보군요 

dragover drag 이벤트리스너를 dragstart 이벤트리스너 밖으로 꺼내보거나 그래봅시다 

[열매]

네 원본은 이제 잘 남고 있습니다...
그런데 dragover 이벤트리스너를 밖으로 꺼내보아도 처음에 선택했던 사진들이
계속 딸려오네요...

왜 이게 누적이되는걸까요..
처음 1번째 사진을 누르면 e.target.dataset.id를 로그 찍었을 때 값이 1인데
그다음 4번째사진을 누르면 e.target.dataset.id 는 1, 4 이렇게 나옵니다

아... 제가 무슨 저주에 걸려서 지금 이럴까요..
맨 밑에 변수를 초기화하려고 e.target.dataset.id=''; 이런식으로 코드를 짜도
계속 누적되네요.. 마지막으로 한번만 더 질문하겠습니다 ㅠㅠㅠ

[codingapple]

drop 이벤트리스너도 밖으로 빼야할듯요 

안그러면 dragstart할 때마다 이벤트리스너가 1개 더 부착됩니다 

[열매]

아!!! 드디어 됐습니다!!!

drop이벤트리스너를 밖으로빼면 e.target.value를 어떻게 가져오나 고민하다가..! 저번에 했던 질문에서 힌트를 받아서 여차저차 잘 해냈내요 ㅋㅋㅋㅋ 감사합니다!!!

[글쓴이]

글