상품 드래그 해서 장바구니에 넣으면 상품카드 담기기.

dragstar, dragover, drop 이벤트 리스너 사용해서 하면 되는데,

여기서 제일 중요한건, 내가 누른 그것에 해당하는 object를 가져올 수 있는가 이다. 

 

제일 간편하게 할 수 있는 방법은 

내가 누른 그것에 상품 id값을 부여해 주는것. 

그러면 형제요소 부모요소 이런거 찾을 필요 없음 

 

어떻게 하냐면 

data- 이름 기능을 사용해서 .dataset.이름 으로 정보 불러오는 거다. 

 

그래서 불러온 그 아이디 값을 몰래 저장할 수 있다. 

바로 .dataTransfer.setData('이름', 저장하려는 데이터) 이렇게.

근데 드래그 앤 드롭 이벤트 에서 이거 사용하려면 e.originalEvent 뒤에 써야함 ㅋㅋㅋ 그래야 원본 객체 가져와서 정보 활용함. 

 

무튼 이렇게 셋팅 한 뒤에 넣을 데이터에 e.target.dataset.id 를 넣어주면 되고, 

drop 이벤트 일어날때 몰래 넣어준 데이터 불러와서  .dataTransfer.getData('이름', 저장하려는 데이터) 변수에 넣어둠. 

 

자 이제 내가 드래그 앤 드롭 한 상품의 id값을 가져왔으니, 비교 시작

cart에 지금 가져온 상품 있는지 없는지 .findIndex() 와, .find() 로 확인.

그리고 그 값을 또 변수에 넣어서 조건문 실행

해당 요소의 count 속성 추가후 설정 혹은 증가.

그리고 그거 cart에 push 하기

 

그리고 장바구니에  다시 카드 붙여줄껀데,

cart에 담아둔 정보 forEach 돌면서 append 해주면 끝.

 

최종가격 계산은 만들어둔 함수 이름 호출해 주고,

input값 조정하면 최종가격 계산 함수 실행하도록 해주고

input값 조정하면 count 속성도 바뀌어야 하니까  

e.target.parentElement.dataset.id 뭐 이런거로 아이디 값 가져와서

cart에 가져온 아이디 값과 같은 애가 있는지 없는지 indeIndex 로 확인.

있다면 그 index정보 주니까  cart[받은 index정보].count = 지금 input에 입력한 값 

이렇게 해주면 끝!

 

 

 

 

별거 아닌거 같은 기능이지만,

처음이라 엄청 해매고, ㅋㅋㅋㅋ

card.forEach 따로 해서 그 안에 dragstart 하고 ㅋㅋㅋㅋ

buket.forEach 또 따로 해서 그 안에 dragover과 drop 하고 ㅋㅋㅋㅋ 

정말 내가 썻지만 읽기 힘든 ㅋㅋㅋㅋ 코드로 가득 채웠었다. 

 

정리된 코드를 보고 

혼자 다시 만들어 보니까 그제서야

아 이렇게 하는거구나 싶다..

ㅋㅋㅋㅋㅋㅋㅋ

뒤늦은 깨달음...

 

얼른 깔끔하고 한눈에 들어오면서도 필요한 기능을 쓕쓕 구현해 내는 개발자가 되고싶당.. 

어느 누가 봐도 알아볼 수 있게.. 

화이팅!