4주차_210722

주간 학습/주간 학습

4주차_210722

HSY_mumu 2021. 7. 22. 13:53

728x90

<백틱 문자열>

여러개 문자열을 +를 쓰지 않고 나타낼 수 있음
백틱(``): 키보드 ~ 위에 표시된 것
`$(변수명)`

const num = 0;
const str = `내 순서는 ${num} 입니다.`;

drag를 통해 자식 순서를 바꿀 수 있는 list

1) html <head>에 <script> 삽입

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
</script>

2) sortable을 적용하고 싶은 리스트 태그(div, ul 등등) id를 위에서 설정한 것과 동일하게 설정

여기서는 sortable(다른 이름으로 하고싶다면 바꾸어도 상관X)
script function id = 리스트 태그 id

<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>

[참고] sortable jquery

https://jqueryui.com/sortable/

Sortable | jQuery UI

Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope

jqueryui.com