muuri로 Drag&Drop 만들기

- 일단 기억나는대로 까먹기 전에 정리해놓음 

 

> Drag&Drop 구현 조건 

• 좌측 영역에서 우측영역으로 Drag&Drop하고 우측 아이템 복사하는 것 처럼 같은 항목을 계속 드래그 해서 넣을 수 있음
  • 이 때 우측 영역은 5개의 그룹으로 나누어서 보여줘야하며 5개 그룹간에는 Item을 드래그해서 옮길 수 없다.
  • 우측의 5개 영역에서 좌측으로만 옮길 수 있으며 좌측의 Area는 Item을 넣을 수록 무한정으로 길어지게 구현하고 우측의 Area는 Scroll로 Max-height : 700으로 고정하여 안의 5개 드래그 그룹을 내부 스크롤로 보여주고, 리모컨처럼 스크롤을 내리면 우측  Area는 고정되어 보여지게 한다. 
• 하나의 아이템에 대해서 Drag하기 전의 Item UI와 Drag하고 나서의 Item UI를 다르게 보여준다.
  • 이미지, 사이즈를 다르게 해줘야했음
  • Item을 드래그를 누른채로 이동할 때 보여지는 이미지도 드래그 하기 전의 이미지와 다르게 보여줘야 했다. 
• 좌측에 넣은 것은 삭제할 수 있게 한다. 
  • 이 때 또 좌측에 넣은 아이템에 대해 다른 화면에서 연동시켜놓은 상품이 있으면 삭제할 때 알려줘야 한다. 

- Muuri Library를 통해서 구현을 했으며 CSS와 Script를 통해서 처리하였음 

 

• 삽질을 한 이유 
  • 일단 CSS를 처리하는데 muuri Library에서 부여하는 HTMLElement들에 대해 구조적으로 먼저 잘 못 봤었음 
    • grid > item > item-contents로 이루어져있고 나는 item-contents별로 아이템들에게 DB의 id가 붙은 값으로 class명을 부여해줘서 Background-image로 Image를 넣어 그룹 및 좌측/우측 영역에 따른 아이템의 UI를 다르게 보여주고자 하였음
    • 근데 이게 Size가 문제였다. Muuri는 기본적으로 기존 드래그 하기전의 이미지와 사이즈를 기반으로 Drag 하는 중의 액션/Drag하다가 딱 놨을 때의 액션/그리고 놓은 그 그룹에 해당 아이템이 배치되는 액션들을 처리하는데 나는 이 액션들을 Drag하기 전의 아이템 사이즈 기준이 아닌 Drag하고 나서의 결과값의 Item 사이즈 기준으로 처리해줘야 했음
  • 그래서 가이드라인에서 잡아준 것과 반대의 역순으로 CSS를 부여했다. 
    • 전체 아이템에 대해 원하는 결과값의 Item의 사이즈와 이미지의 CSS를 적용했고 다르게 처리해야하는 드래그 하기 전의 CSS는 한번 Grid로 감싸서 해당 HTMLElement을 잡아서 따로 적용시킴 
  • 그리고 내가 순간 야근하면서 뇌정지가 오는 바람에 갑자기 엇 이건 코드 정리가 되겠는데 하고 일부러 뒤에 선언을 해줬던 CSS 코드들을 앞으로 다 옮겨서 선언해버림
    • 그래서 잘 되던 UI도 갑자기 맛탱이 가버리고 이렇게 해버리면 Drag하는 중의 Item UI가 망가져버리기 때문에 다시 합쳤던 코드를 뒤로 돌린다고 삽질을 함 
  • 그리고 그 그룹별로 5개 Drag할 아이템들을 보여준건 백단에서 Python defaultDict로 사전해 그룹핑해서 그냥 For문으로 Html에서 돌려서 넣어줌 
    • 이 때 for loop index로 grid1부터 grid5까지 class먹이고 Muuri 생성해 줄 때 grid class명으로 생성해주면 되기 때문에 이걸로 5개 선언해줘서 처리해줬음