천유린 개발 블로그

천유린 개발 블로그

  • 분류 전체보기 (94)
    • Javascript (68)
      • 응용 (8)
      • 자료구조 (23)
      • 문법 (7)
      • 알고리즘 (20)
      • 33가지 개념 (7)
      • 시행착오 (3)
    • NodeJS (5)
      • TDD (5)
    • 운영체제 (10)
      • Overview (5)
      • 프로세스 (5)
    • 네트워크 (6)
      • 웹 (3)
      • HTTP (3)
    • 리액트 (0)
      • Amplify (0)
    • 리액트 네이티브 (1)
      • Expo (1)
    • 깃 (2)
  • 홈
  • 태그
  • 방명록
RSS 피드
로그인
로그아웃 글쓰기 관리

천유린 개발 블로그

컨텐츠 검색

태그

js 자료구조 TDD 비동기처리 콜백지옥 슈퍼테스트 overview 프로그래머스 정의 33가지 만들기 자바스크립트 알고리즘 Node.js should 33가지 개념 운영체제 Nodejs 그래프 모카

최근글

댓글

공지사항

아카이브

드래그앤드롭(1)

  • [JS] 마우스 Drog & Drop을 이용하여 박스를 이동시켜보자.

    최근에 마우스 드래그 앤 드롭을 이용하여 박스를 이동시키는 기능을 구현한 적이 있었다. 금방 구현할 줄만 알았는데, 많은 시간이 걸렸다. 어려웠던 경험을 정리하고 내 것으로 확실히 만들기 위해 다시 한 번 이 기능을 만들어보았다. 따라서 이번 포스팅에서는 마우스 이벤트를 이용하여 드래그 앤 드롭(Drag & Drop)을 이용한 박스 이동 기능을 어떻게 구현했는지에 관하여 써보고자한다. 백문이불여일견(白聞不如一見)이라 했다. 구현 영상은 아래와 같다. 완성본 위 기능을 구현하기 위해서는 다음과 같은 마우스 이벤트가 필요하다. mousedown: 마우스 버튼이 눌릴 때 발생하는 이벤트. mouseup: 마우스 버튼이 떼어질 때 발생하는 이벤트. mousemove: 마우스 포인터가 이동할 때 발생하는 이벤트...

    2021.01.04
이전
1
다음
티스토리
© 2018 TISTORY. All rights reserved.

티스토리툴바