드래그 이벤트 - 자바스크립트

2023. 4. 29. 01:56·JS

리스트를 드래그 앤 드롭으로 순서를 변경해야하는 프로젝트를 진행하였다.

이에 drag 이벤트를 간단히 정리하였다.

이벤트 핸들러 설명
drag ondrag 요소를 드래그하면 항상 발생
dragstart ondragstart 드래그가 시작되면 발생
dragend ondragend 드래그가 끝날때 발생(마우스버튼 놓을시)
dragenter ondragenter 이벤트가 달린 요소에 드래그한 아이템이 들어가면 발생
dragleave ondragleave 이벤트가 달린 요소에 드래그한 아이템이 떠날시 발생
dragover ondragover 이벤트가 달린 요소에 드래그가 이루어지면 발생
drop ondrop 이벤트가 달린 요소에 드래그가 끝나면(마우스 버튼을 놓으면) 발생

 

드래그 이벤트를 발생시키기 위해서는 draggable 속성을 추가해야한다.  draggable =  "true"

 

저작자표시 비영리 (새창열림)

'JS' 카테고리의 다른 글

문자열 앞이나 뒤에 자리수만큼 값 채우기  (0) 2023.07.22
리스트 드래그 앤 드랍 구현 (자바스크립트, 엘리먼트로 제어)  (0) 2023.04.29
제너레이터 함수  (0) 2022.02.06
default parameter (매개변수 기본값)  (0) 2020.07.21
ES6 - template literal  (0) 2020.07.21
'JS' 카테고리의 다른 글
  • 문자열 앞이나 뒤에 자리수만큼 값 채우기
  • 리스트 드래그 앤 드랍 구현 (자바스크립트, 엘리먼트로 제어)
  • 제너레이터 함수
  • default parameter (매개변수 기본값)
king_hd
king_hd
웹 개발 공부를 위한 블로그입니다.
king_hd
웹 개발 기록
king_hd
전체
오늘
어제
  • 분류 전체보기
    • HTML
    • CSS
    • JS
    • Typescript
    • React
    • nodejs
    • Redux
    • Git
    • 오류모음
    • Webpack
    • 자료구조
    • 네트워크
    • Electron
    • 배포
    • Docker
    • 프로그래머스

블로그 메뉴

  • 홈

링크

공지사항

인기 글

태그

ec2에 docker 설치
백엔드
웹퍼블리셔
https 인증서 발급
const
자바스크립트
webpack
env파일 환경변수 인식
Hook
TAVE
인증서 자동갱신
리덕스사가
프론트엔드
JavaScript
docker
코딩테스트
타입스크립트
react
프로그래머스
TypeScript
propertykey
Redux-saga
Redux
docker mysql workbench 연동하는 법
웹개발
next.js
4차산업혁명동아리
리덕스
let
mysqld: can't open file: 'mysql.ibd' (errno: 0 - )

최근 댓글

최근 글

hELLO· Designed By정상우.v4.6.0
king_hd
드래그 이벤트 - 자바스크립트
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.