제이쿼리 이미지 드래그 드랍, 사이즈 조절
안녕하세요.
고코더 입니다.
jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다.
레이어 팝업을 만들거나
사용자에게 크기를 조절하게
편의를 제공 하는 기능은 많이 씁니다.
그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.
● 1. 아래 소스를 웹사이트에서 실행해보세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script> $( document ).ready(function() { $('#GoCoderImg1').resizable(); $('#GoCoderImg2').draggable(); }); </script> </head> <body> <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1"> <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2"> </body> </html> | cs |
gocoder_resizable_draggable.html
● 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다.
마무리
jQuery 덕분에 많은게 가능해졌네요
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht(); (1) | 2019.06.19 |
|---|---|
| JavaScript - setTimeout(), setInterval() 차이점 예제 (1) | 2019.06.17 |
| jQuery UI - Div 강조하기 / effect highlight (0) | 2019.06.03 |
| JavaScript - 사파리에서 body, HTML에 클릭(click) 이벤트가 바인딩 되지 않는다. (0) | 2019.05.22 |
| jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl (1) | 2019.05.21 |
댓글