본문 바로가기

jquery3

jquery - draggable 화면 요소를 드래그할 수 있는 draggable 기능은 jquery-ui.js를 사용하면 간단하게 쓸 수 있다! 1. 우선 jquery.js와 jquery-ui.js가 필요하다. 2. 그리고 script에 드래그할 요소를 선언하고 draggable을 써주면 끝! 3. 추가 작업이 필요하다면 옵션과 이벤트 이용하기 draggable도 다음처럼 여러 옵션과 이벤트가 있는데, 그 중 몇개만 소개해 보겠다. ⭐ 옵션 옵션 설명 예시 handle 드래그 handle : '#toolWrapHandle' // #toolWrapHandle 요소를 이용해서 드래그 가능 containment 드래그 이동이 가능한 이동 범위 지정 containment : '.container' // .container 요소 범위에서만 이동.. 2022. 6. 10.
모바일웹 sortable 적용안되는 문제 - touch-punch.js 추가해서 해결 jquery로 sortable 기능을 넣었는데, pc에서는 되지만 모바일웹 환경에서는 sortable을 적용해도 움직이지 않았다. 검색해보니 모바일환경에서는 터치 인식때문에 sortable 드래그 처리를 못한것 같다. 이 문제는 touch-punch.js 만 추가해주니 해결되었다! touch-punch.min.js 👇 raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js 참고한 글 👇 xetown.com/tips/104034 jQuery UI Touch Punch ( feat: jquery-ui 기능에 터치를 인식 ) jquery-ui 플러그인에는 상당히 유용한 기능들이 많이 있습니다. 제가 가장 애.. 2020. 12. 23.
timepicker를 대신할 수 있는 clockpicker 사용법 시간을 선택할 수 있는 jquery plugin 중에서 timepicker를 사용하다가 clockpicker가 더 나은거 같아서 clockpicker를 써보게 되었다! clockpicker를 사용하면- 이렇코롬 귀여운 시계로 시간을 입력받을 수 있다! 부트스트랩 없이도! 사용법도 매우 간단! 1. 우선 js,css파일을 다운로드 한다! 밑에 있는 사이트에서 clockpicker를 사용하기 위한 파일들을 다운로드했다. 다운로드 사이트 ↓ https://www.jqueryscript.net/time-clock/jQuery-Clock-Style-Time-Picker-Plugin-For-Bootstrap-3-clockpicker.html jQuery Clock Style Time Picker Plugin For.. 2019. 11. 28.