인프런 커뮤니티 질문&답변

안녕하세요 다시 한번 복습중에 질문드립니다..

드래그하면 pos값이 변경돼서 데이터에는 잘 반영이 되는데

html에 data-pos속성의 값에는 변경되지 않아서

card를 드래그로 이동하고 drop시 연산이 일어날때는 html에 있는 date-pos 속성(고정되어있는)의 값으로 더하거나 곱하거나 해서 계산이 맞지않습니다 ㅠ 

강사님 코드를 참고해보긴 했는데 강사님도 data-pos="data.pos" 이런식으로 하시더라구요.. 제가 놓치고 있는 부분이 있을까요..? 질문드립니다!

				<li class="list_item" v-for="(row, index) in rowData" v-bind:key="index">
					<div :data-idx="row.idx" :data-pos="row.pos">
						<input type="text" :value="row.subject" readonly>
						{{row.idx}}
						<button type="button" class="memo_delete" @click="deleteList(row.idx)">&times;</button>
					</div>

...

...

...

			const targetList = {
				idx: el.firstElementChild.dataset.idx*1,
				pos: el.firstElementChild.dataset.pos*1
			};

			// 순서 비교는 배열의 index값으로 할꺼임
			Array.from(document.querySelectorAll('#memoList .list_item')).forEach((el, idx, arr) => { // 배열의 index로 target의 위치 확인
				const cardId = el.firstElementChild.dataset.idx;
				let prevList = null;
				let nextList = null;
				if(cardId == targetList.idx) {
					prevList = idx > 0 ? {
						idx: arr[idx-1].firstElementChild.dataset.idx*1,
						pos: arr[idx-1].firstElementChild.dataset.pos*1
					} : null;
					nextList = idx < arr.length-1 ? {
						idx: arr[idx+1].firstElementChild.dataset.idx*1,
						pos: arr[idx+1].firstElementChild.dataset.pos*1
					} : null;

					if(!prevList && nextList) {
						targetList.pos = nextList.pos / 2; // 첫 번째 자리
						console.log('첫 번째 자리');
					}
					else if(!nextList && prevList) {
						targetList.pos = prevList.pos * 2; //마지막 자리
						console.log('마지막 자리');
					}
					else {
						targetList.pos = (nextList.pos + prevList.pos) / 2; //중간 자리
						console.log('중간 자리 ===',prevList.pos,'====',nextList.pos, arr[idx+1]);
					}

					vm.$http({
						method: 'PUT',
						url: '/memo/update',
						data: {
							pos: targetList.pos,
							idx: targetList.idx
						}
					})
				}
			})