# drag
Drag & Drop - Basics
기본적으로 드래그 이벤트를 사용할려면 엘리먼트 속성에 draggable을 설정해야한다.drag, dragover 이벤트는 필수로 사용해야 하는 이벤트이다.dragstart - 드래그가 시작되는 순간 발생drag - 요소를 드래그 할 때 발생, 드래그시 연속적으로 발생
[Swap(), 그 기록] 6. 드래그 앤 드롭 (feat. useRef)
이 포스팅은 사이드 프로젝트를 진행하며 생겼던 여러 일들에 대해서 기록을 겸하여 작성한 글입니다. 주기적으로 작성하고자 노력은 하지만 블로그 포스팅 한번 하려고 하면 머릿속에서 나만의 언어로 정리도 하면서 작성하다가 몇시간은 사용하는 지라 주기적이지 않을 가능성이 농후
Js Challenge14 - #13 Kanban Board
자바스크립트를 활용하여 칸반 보드를 구현해본다.드래그 기능을 구현한다.칸반 보드 카드 추가 및 삭제 기능을 구현한다.setAttributeaddEventListener (drag속성)setAttribute는 속성 값을 설정하기 위해 사용한다. 상호작용은 무조건적인 문자
[리뷰] 드래그 이벤트 제어하기(마우스, 터치)
안녕하세요~ HTML 엘리먼트를 마우스로 옮기는 방법을 적어볼게요~드래그는 클릭시작, 이동, 클릭끝 3단계로 이뤄지는데요. 이를 이벤트 함수로 등록해서 드래그를 제어할 수 있어요.단 주의할 점은 마우스와 터치 이벤트의 속성이 조금 다르다는 건데요. 이를 해결하기 위해
JS / 웹개발 경진대회 / 장바구니 기능에 drag & drop 추가
2020 웹개발 경진대회 문제풀이 도중 상품 카드를 장바구니 쪽으로 드래그해서 옮기게 되면 해당 상품이 장바구니에 추가되는 기능 구현이다. 기능 구현을 위해서 js 이벤트리스너 drag & drop 이 필요했는데 처음 써보는 이벤트리스너라 공부가 필요했다. 상품 리스트에서 카드를 장바구니 쪽으로 드래그 하면 기존에 구현했던 장바구니 추가 기능 코드를 실행...
Drag and Drop using Hook
RefHooking, Using Drag and Drop in React장점 1, 재사용성.: Hooks create a common way to reuse code by incorporating a single function call to use React feat
Drag 제스쳐
구현하고자 하는 것 예전에 구현한 것인데 포스팅을 깜빡하고 잊었네요. 지금 구현하고자하는 것은 드래그 제스처를 활용해서 단어의 암기 여부를 DB에 기록하는 기능입니다. 그리고 맞은 단어는 초록색, 틀린 단어는 노란색으로 색도 바꾸어 줍니다. 물론 UITableVie
[2022.06.22] JS drag and drop으로 선택한 요소의 위치 바꾸기
이틀 전에 혼자 드래그 앤 드롭 구현했을 때 동작은 잘 되는데 뭔가 아쉬운..? 느낌이 있어서 관련 영상 찾아서 따라 만들어보고 복습겸 다시 만들어보았다.list 이름의 변수를 선언하여 class가 list인 요소를 선택하였다. ul 태그가 선택될 것이다.let으로 선
[2022.06.20] (스스로 해보기) 자바스크립트로 드래그 앤 드롭 이벤트 구현하기
자바스크립트 복습 겸 드래그 앤 드롭 이벤트 구현 공부HTML과 CSS를 사용해 드래그할 요소와 드래그 박스를 만들었다.드래그 요소에는 draggable 속성을 작성해주면 된다.드래그 이벤트는 드래그 가능한 대상에서 발생할 수 있는 이벤트이다.dragstart드래그가
[2022.04.26] 드래그 앤 드롭 퍼즐게임 따라 만들어보기
어제 드래그 앤 드롭에 대한 개념 정리하면서 간단히 사용해본 드래그 앤 드롭을 이용한 게임 만드는 것을 따라해봤다.데브리님의 유튜브 영상을 보면서 만들어봤는데 머리에 온갖 개념이 나돌아 다녀서 일단은 따라해보면서 구현해보고 다음에 다시 처음부터 혼자 만들어보려고 한다.
1.15~16- React masterClass (Framer motion1)
Farmer motion을 사용해서 여러가지 애니메이션 동작을 공부해볼 것이다.사용법은 먼전 npm i framer-motion으로 설치해주고 import를 해준 후import { motion } from "framer-motion";모든 HTML tag들을 <d