내용은 별거 없다.
공식문서 보니까
jquery 라이브러리와 jqueryui 라이브러리 임포트 시켜놓고 적용 하는 것.
내 경우에 좀 고민이 많았던 게
ul
li
li
ul
li
li
li
li
이러한 구조로 짜야 했는데, li 하위에 있는 ul 태그가 li를 1개만 갖고 그려진 문제가 있었다.
for문 위치를 잘못 잡아 한개 그리고 닫고 한개 그리고 닫고하는 식으로 그렸음...
그러다보니 하위 태그가 이동을 안하는 문제...
이건 내 실수라 별수 없었다 ㅇㅅㅇ
아무튼 결론적으로 구조는 아래와 같다
참조 코드에서 적힌 start는 잡히나 end는 안잡히는 것을 보아 end가 아니라 stop인 듯?
난 update만 필요해서 update로 호출.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="parents">
<li class="parents-item"></li>
<li class="parents-item"></li>
<li class="parents-item"></li>
<li class="parents-item">
<ul class="children">
<li class="children-item"></li>
<li class="children-item"></li>
<li class="children-item"></li>
</ul>
</li>
<li class="parents-item"></li>
</ul>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"/>
<script>
$('.parents').sortable({
item: $('.parents-item'),
update: function(event, ui) {
console.log('update point : ' + ui.item.indx());
}
});
$('.children').sortable({
item: $('.children-item'),
update: function(event, ui) {
console.log('update point : ' + ui.item.indx());
}
});
</script>
</html>
update를 할 경우마다 이동한 li값에 idx를 넣어두어 해당 이벤트가 발생한 것의 id를 가져와
변수에 담아놓은 배열의 idx를 filter해서 제거하고, splice함수를 통해서 해당 배열의 순서로 넣어주었다.
그리고 서버에서 준 순서로 다시 재정렬해야하는 부분이 있어, 해당 부분으로 다시 정렬했다.
// 전역변수
let var1 = ['a', ['a', 'b', 'c'], 'c'];
let var2 = ['a', ['a', 'b', 'c'], 'c'];
update 함수 내 내용들
// parents-item li가 바껴진 특정이벤트가 발생한 순서
let num = 1;
let idx = $(this).attr('idx');
var1.filter(function(el) {
return el !== idx
});
// 배열의 순서를 상관없이 해당 위치로 넣게 만들어준다.
var1.splice(num, 0, ['c', 'a', 'b']);
// 해당 속성에서 attributes로 순서를 넣어둠.
// 해당 서버에서 준 순서로 다시 동기화
var1.map((el, idx)=> {
el[idx].align = var2[idx].align;
});
// 이제 서버 통신해서 업데이트
// 대충 이런 구성으로 진행
- 공식문서 -
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
- 참조 -
https://madplay.github.io/post/jquery-sortable
jQuery Sortable (드래그앤드롭으로 정렬 구현하기)
jQuery UI로 드래그 & 드랍 정렬을 구현해보자!
madplay.github.io
https://hianna.tistory.com/396
[Javascript] 배열 중간에 값 추가, 삭제하기 (2) - splice() 함수
지난 번에는 unshift(), shift(), push(), pop() 함수를 사용하여, 배열의 맨 앞과 뒤의 원소를 추가, 삭제하는 방법을 알아보았습니다. [Javascript] 배열에 값 추가, 삭제하기 (앞, 뒤) (1) 이번에는 splice() 함
hianna.tistory.com
'취업 > CodeIgniter' 카테고리의 다른 글
| [php] curl 유형 QS방식으로 변환하기. (0) | 2023.02.01 |
|---|---|
| [CI4] PHP md5 동일 파일 체크하기. (0) | 2023.01.05 |
| [CI4] 다날 API PHP 연동작업 후기 (0) | 2022.12.18 |
| [CI4]codeigniter4에서 www 작동하게 만들기.(with apache) (0) | 2022.12.14 |
| [CI4] 스텝바 코드 CSS (0) | 2022.10.25 |