반응형
JQuery의 첫 개발 포스트는 드래그앤드랍을 활용해서 리스트 순서를 바꾸는 기능을 구현해볼거에요 :-)
물론 순서를 바꾸고, 바꾼 순서를 콘솔을 통해 보여주는 기능까지 구현해볼거니까, 걱정하지마세요 !
먼저 위에 그림은 완성된 모습이에요.
일단 Item 순서가 약간 바뀌어있는데, 이건 제가 화면에서 드래그앤드랍을 통해 바꿔봤어요 !
그러면 잡소리 안하고 바로 소스 리뷰와 함께 바로 아래에 샘플소스 압축파일을 받아보시면 되요 !
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Sample Webpage</title> <style> #sortable { list-style-type: none; margin: 0; padding: 0; } #sortable li { margin: 0 3px 3px; padding: .4em; font-size: 1.4em; line-height: 2.5rem; float: left; width: 70px; height: 30px; border: 1px solid #000; background-color: skyblue; } button { margin-top: 10px; margin-left: 45%; width: 10%; } </style> <script src="../lib/JQuery-DEV-3.3.1/jquery-3.3.1.js"></script> <script src="../lib/JQuery-UI-1.12.1/jquery-ui.min.js"></script> <script> $(function () { $("#sortable").sortable(); $("#sortable").disableSelection(); }); function ValueCheck() { let rstData = []; let children = $("#sortable")[0].children; for (let i = 0; i < children.length; i++) { rstData.push(children[i].innerText); } console.log(rstData); } </script> </head> <body> <ul id="sortable"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> <li class="item">Item 4</li> <li class="item">Item 5</li> <li class="item">Item 6</li> <li class="item">Item 7</li> </ul> <button onclick="ValueCheck()">확인</button> </body> </html>
소스는 무진장 간단해요 !
ul, li 태그로 리스트를 만들어주고, 움직이게 해주기위한 JQuery 라이브러리를 사용해서 간단하게 구현해보았어요
JQuery는 다운로드는 여기 클릭하셔서 링크가시면 다운받으실 수 있습니다.
마지막으로, 바로 전에 언급한 부분인데 JQuery를 사용하기 위해 HTML 에서 외부 참조를 시켜줘야해요 !
물론 외부참조가 아니라 바로 작성해도 무방하지만, 저는 개인적으로 소스 관리차원에서 분리시키는 걸 좋아하기 때문에...
이건 각자 여러분들의 개인 취향에 맞길게요
간단한 드래그앤드랍 기능 여기서 마치도록 할게요 :-)
반응형
'프론트앤드 > JQuery' 카테고리의 다른 글
| [JQuery/Javascript/ERROR] HTTP CORS 크로스도메인 요청 에러 (0) | 2019.09.29 |
|---|---|
| [JQuery] 제이쿼리 다운로드 받기 (0) | 2018.09.22 |
