오늘은 jQuery UI의 가장 강력한 기능인 Draggable과 Droppable을 이용해
드래그앤드랍 기능을 쉽고 빠르게 구현해보았습니다.
2개 이상의 드래그객체를 한곳의 드롭다운영역에 위치했을때 발생할수 있는 가장 많이 사용되는 이벤트를 예제소스로 만들어봤습니다~
사실 jquery-ui.min.js가 알아서 해주기때문에 필요한걸 쏙쏙 뽑아서 넣어주기만 하면 되는수준인데...
헉 모바일에서 손가락에 인식을 안해서 깜놀 ㅠㅠ
그냥 jquery.ui.touch-punch.js 만 jquery-ui.min.js 바로 아래에 선언해주니 모바일까지 완벽하게 동작하네요~ 휴ㅋㅋㅋ
See the Pen jquery ui를 이용한 드래그앤드랍 (모바일포함) by 장명호 (@jangmang) on CodePen.
그냥 $(".drag").draggable(); 만 넣어줘도 기본 드래그기능은 바로 동작하지만
예제코드안 주석내용처럼 revert 메서드안에 event 인자값을 이용해서 체크하는 값들을 만들어내거나
$("#drop").droppable(.....) 안의 메서드를 이용해서도 드롭된 후의 이벤트들도 제어가 가능합니다.
그밖에 기능들은 아래 공식사이트에서
데모와 소스를 참고하면서 필요한 기능을 확장해가면 될거같아요 :)
https://jqueryui.com/draggable/
Draggable | jQuery UI
Draggable Allow elements to be moved using the mouse. Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1
jqueryui.com
감사합니다 :)
'코딩저장소' 카테고리의 다른 글
| 5분 타이머 화면에 출력하기 (0) | 2023.02.27 |
|---|---|
| 마우스포인터 방향으로 따라가는 화면만들기 (0) | 2022.05.06 |
| CSS 한줄로 슬라이드 모션효과를 줄수있는 scroll-snap-type (0) | 2022.03.09 |
| GreenSock 플러그인 ScrollTrigger 사용법 (0) | 2022.02.22 |
| fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합) (29) | 2022.02.21 |
댓글