Home to do list - drag and drop(jquery)
Post
Cancel

to do list - drag and drop(jquery)

list 위치 변경.

기존에 내가 만든 to-do 리스트를 사용하다가 이번에 챌린지로 인해서 할일과 다 끝낸일을 추가했다. 그렇게 사용하다가 불편한게 있어서 몇가지 기능을 추가하려고 했다. 그 첫번째로 to-do 리스트의 순서를 변경하고 싶다는 것이었다. 그래서 구글에 찾아본결과 자바스크립트로 drag and drop 이벤트로 구현할 수 있긴 한데 너무 복잡해보였다. 그러던 도중 jquery 의 sortable 이란걸 발견했고 적용했다.

jquery는 자바스크립트와는 다르게 html 상에 jquery source script를 추가하고 그밑에 또다시 sript 태그를 쓰고 안에다 jquery코드를 입력하는 방식이다. jquery UI 와 library 가 필요하다.

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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>JUST F**KING DO IT</title>
  </head>
  <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 () {
      $("#js_pending").sortable({
        //옮기고 싶은 리스트를 id 로 명시하고 sortable 함수를 추가한다.
        axis: "y", // y축 방향으로 옮긴다.
        revert: true, // 커서를 놓으면 부드럽게 옮겨진 위치로 리스트가 이동한다
        scroll: true,
        placeholder: "sortable-placeholder", // 옮겨질 위치에 임시로 무언가를 표시해준다. index.css에 sortable-placeholder {opacity:0.5} 로 설정해놓았다.
        start: function (event, ui) {
          console.log(ui.item.html());
          ui.placeholder.html(ui.item.html()); // 그리고 선택한 아이템을 placeholder있는자리에 위치하도록 한다.
        },
      });

      $("#js_pending").disableSelection(); // 아이템안에서 선택을 못하게 하는 기능이라고 한다.
    });
  </script>

  <body>
    <section class="list">
      <div>
        <h3>PENDING</h3>
        <ul id="js_pending"></ul>
      </div>
      <div>
        <h3>FINISHED</h3>
        <ul id="js_finished"></ul>
      </div>
    </section>
  </body>
</html>

jquery

This post is licensed under CC BY 4.0 by the author.