티스토리 뷰

IT tech Coding/jquery

[jquery] 아이템을 상하 조정하고 싶을때 사용하면 되는 방법

Coding Life 2023. 3. 2. 10:44
반응형

아이템이 1부터 7까지 있다고 가정하고, 아래의 아이템들을 상하 마음대로 조정하고 싶다면?

제이쿼리 문법으로 아주 간단하게 동작하는 방법이 있어서 소개합니다.

코드가 아주 간단하네요~

위의 순서를 마우스 클릭앤 드래그로 바꾸니 참 쉽습니다.

코드는 제이쿼리 함수가 존재함을 알 수 있지요.

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
 
 
</body>
</html>

 

핵심은 요것이네요.

$( "#sortable" ).sortable();

 

이 속성만 주면... 리스트에 있는 것들이 마음대로 움직이는 마법을 보게됩니다. ^^

반응형
저작자표시 비영리 변경금지

'IT tech Coding > jquery' 카테고리의 다른 글

jquery ajax 중복호출 벗어나자, 진짜 이것때문에 개고생함  (5) 2023.03.24
[jquery] 웹에서 특정 버튼이나 문구 등 마우스 오른쪽 버튼 누를때 메뉴보이게 만들기  (0) 2023.03.02
[jQuery] 자주 만나는 에러 Uncaught TypeError: Cannot read properties of undefined (reading 'mode') 에러 잡기  (0) 2023.02.16
jquery 선택값에 따라 button 안보이게 하는 방법  (0) 2022.12.12
제이쿼리 리피터(repeater) 사용시 이벤트 등 뭔가 추가하고 싶을때 잘안되는 경우 이렇게 한번 해보시면 어떨런지요.  (0) 2022.12.05
댓글