# Drag & Drop

tnals634

오늘은 프론트에서 card의 get, post를 테스트해볼꺼고 sequence update에 대해서도 수정하려 합니다. get을 연결 후 확인해보니 잘 나오지 않고 columnId가 없다는 문제만 떠서 js파일에서 console로 찍어보며 찾았습니다. 문제는 columnId가 html에 뿌려지기도 전에 get에서 먼저 찾고 있어 순서가 바뀌었어서 난 오류여서 수정해주었고, post는 처음 작성할때 sequnce값이 들어가지않아 계속 오류가 나서 찾다가도 도저히 모르겠어서 좀 쉬면서 생각만 해보다가 혹시나 싶어 card를 생성하는 버튼에 data-index(이부분이 마지막 sequence값이 들어감)에 값이 들어가나 확인해보니 들어가지 않았습니다. 처음에는 저 card의 데이터들을 for(let i in data) 로 for문을 돌려가며 값을 innerHTML에 넣어줬는데, 저 i값이 들어가지 않았어서 밖으로 빼주고 하니 data-index에는 값이 잘 들어갔습니다. 하지만 컬럼

bgo517

오늘은 라이브러리가 아닌 JS만으로 Drag & Drop을 구현해보자 Drag & Drop을 구현하기 위해서는 해당 document에 draggable 속성을 줘야한다. Drag & Drop에 필요한 이벤트와 메서드가 있다. 다양한 이벤트가 있지만 여기서는 4가지만 사용해본다. dragstart, dragover, drop 그리고 datatransfer 메서드가 있다 datatransfer datatransfer는 Drag & drop을 사용하는데 필요한 메서드 이고 Drag & drop이 되는 대상의 data를 담고 꺼내 쓰는 역할을 한다. dragstart drag가 시작되었을 때 발생하는 이벤트이며, 어떤 document를 drag했는지 dataTransfer에 setData(키, 값)으로 넣어놓고 나중에 drop할 때 꺼내 쓸 수 있다. dragover dragover는 drop 대상에서 발생하는 이벤트다 drop drop은

raccoon-ccoder

🦝 2022-08-08 (월) 오늘 한 것 포틀릿을 통한 차트 이동 구현 gh-pages 배포시 cors 문제 해결 (야매로 한 거라 다시 봐야할 듯 싶다) Bootstrap Card 레이아웃 생성 및 Card header에 있는 특정 아이콘 클릭시에만 차트 드래그 앤 드랍 구현 오늘 배운 것 @shopify/draggable Draggable 속성 handle - 특정 버튼 클릭시에만 drag & drop 가능하게 구현 plugins: [Plugins.SortAnimation] - drag & drop 시 부드러운 애니메이션 및 주변 컴포넌트 상하좌우 움직이게 적용 echarts 공백 제거 방법 grid - 속성으로 원하는 만큼의 공백을 제거한다. 에러 해결 react 프로젝트 gh-pages에 배포시 cors 문제 해결 개발 단계에서는 http-proxy-middlewar

yunsungyang-omc

원티드 X 코드스테이츠 1주차 과정을 마쳤다. 이번 포스팅은 기업과제를 하면서 내가 수행한 파트에 대한 내용이다. Drag & Drop 구현하기 기업과제로 주어진 내용은 Dual Selctor를 구현해서 좌우로 콘텐츠를 넘기는 내용이었다. 그중 나는 같은 엘리먼트에 위치한 콘텐츠들을 마우스 이벤트로 드래그 & 드랍하는 부분을 작성하기로 했다. 마우스 이벤트 mouseover 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을때 발생한다. mouseout 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생한다. mouseEnter 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을때 발

yisu-kim

Drag & Drop > The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation. > > by MDN Drag and Drop API를 사용하면 draggable 엘리먼트를 드래그해 droppable 엘리먼트에 드랍할 수 있다. draggable과 Drag Events draggable 속성을 통해 엘리먼트의 드래그 가능 여부를 설정할 수 있다.