티스토리 뷰




Step 9. Donelist에서 다시 Todolist로 보내기


이번 Step 에서도 사용자 경험에 집중해서 좀 더 발전시켜보겠다.
만약에 사용자가 실수로 Donelist 로 item 을 보냈다면?
다시 취소해야할 수 있는게 아닌가?

Donelist에 있는 list를 더블클릭하면
다시 Todolist로 올 수 있게 하자.

자바스크립트만 조금 손보면 될 듯하다.
우리가 더블클릭할 li 태그의 parentId 값을 읽어오자.
그렇다면 자신이 현재 속해있는 list가 어떤 list인지 알 수 있게 된다.
if 문으로 분기해서
todolist에 속해있다면, donelist로 보내고
donelist에 속해있다면, todolist로 보내는 것이다. 

main.js code>
1
2
3
4
5
6
7
8
9
10
11
12
13
var donelist = document.getElementById('donelist');
function moveItem(){
  //this === span
  var listItemId = this.id.replace('li_''');
  var listItem = document.getElementById('li_' + listItemId);
  var listItemParentId = listItem.parentElement;
  console.log(listItemParentId);
  if(listItemParentId == donelist){
    todolist.appendChild(listItem);
  } else {
    donelist.appendChild(listItem);
  }
cs



- Step 9. The end -

 

Step 10. 삭제 버튼 구현하기. [이동]


«   2021/12   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
Total
1,508,892
Today
421
Yesterday
468