본문 바로가기

Dev.Project/Todolist_project

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




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. 삭제 버튼 구현하기. [이동]