[PROJECT] jQuery-UI를 이용한 Trello clone project (5) jQuery UI 스크립트 작성

jQuery-UI를 이용한 Trello clone project (5) jQuery UI 스크립트 작성

지난 시간에

DOM을 제어하는 스크립트를 작성해 보았다. 이번 시간에는 jQuery UI 를 이용하여 엘리먼트들을 이동 및 정렬해 보겠다.

 

jQuery UI 스크립트 작성

굉장히 간단하다. 생각하여야 할 것은 두가지이다.

1. 리스트간의 정렬 및 이동
2. 리스트간의 카드 이동

이제 하나하나씩 해결해 보자

리스트간의 정렬 및 이동

$("#listWrap").sortable({
    placeholder: "list-placeholder",
    handle: ".listTitleWrap",
});

placeholder 속성은 해당 엘리먼트가 놓일 자리에 마크가 생기는 것인데 밑에서 설명하겠다.

handle속성은 해당 엘리먼트를 선택해야 이동이 가능할게 해주는 것이다. 일명 손잡이 이다.

 

리스트간의 카드 이동

$(".cardWrap").sortable({
    connectWith: ".cardWrap",
    placeholder: "card-placeholder"
});

connectWith 속성은 서로서로 자식 엘리먼트들을 공유한다는 것이다. 따라서 .cardWrap 밑에있는 cardContent 들을 서로 공유할 수 있다.

여기서 주의할 점이 있는데 기존에 생성되어 있던 카드들은 상관이 없지만 새로 생기는 카드들의 관해서는 sortable 속성이 적용이 되지 않는다. 따라서 생성 스크립트 사이에도 코드를 삽입해야 한다.

 

코드를 삽입하는 곳

addListForm.submit(function (e) {
    ......
    $(".cardWrap").sortable({
        connectWith: ".cardWrap",
        placeholder: "card-placeholder"
    });
});

$(document).on("submit", ".addCard", function (e) {
    ......
    $(".cardWrap").sortable({
        connectWith: ".cardWrap",
        placeholder: "card-placeholder"
    });
});

 

placeholder 스타일 적용

아까 전에 말했던 placeholder 속성에 대한 스타일을 적용시키겠다.

리스트의 list-placeholder, 카드의 card-placeholder 에 대한 scss 코드 이다.

.card-placeholder {
  width: 250px;
  height: 33px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: $card-placeholder-color;
  margin-bottom: 12px;
}

.list-placeholder {
  width: 270px;
  height: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: $list-placeholder-color;
  margin-right: 15px;
  display: inline-block;
}

.ui-sortable-helper {
  transform: skew(-5deg, 5deg) !important;
}

맨 마지막에 있는 .ui-sortable-helper정렬하려고 잡고 있는 동안 모습을 스타일한 것이다. Trello 에서는 이동할때 살짝 기울어져 있는 모습을 띄는데 한 번 적용시켜 보았다.

 

전체 코드

$(document).ready(function () {
    var pjTitle = $("#title");
    var pjTitleEdit = $("#titleEdit");
    var addListLabel = $("#addLabel");
    var addListForm = $("#addList");
    pjTitle.dblclick(function (e) {
        e.preventDefault();
        pjTitleEdit.val(pjTitle.html());
        pjTitle.hide();
        pjTitleEdit.show();
        pjTitleEdit.children("#projectTitle").focus();
    });

    pjTitleEdit.submit(function (e) {
        e.preventDefault();
        let title = $("#projectTitle").val();
        if (title == "") {
            title = "New Project";
        }
        pjTitle.html(title);
        pjTitleEdit.hide();
        pjTitle.show();
    });
    $(document).on('dblclick', ".title", function (e) {
        e.preventDefault();
        let ltTitleEdit = $(this).parent().children(".titleEdit");
        ltTitleEdit.children(".listTitle").val($(this).html());
        ltTitleEdit.children(".listTitle").focus();
        $(this).hide();
        ltTitleEdit.show();

    });
    $(document).on("submit", ".titleEdit", function (e) {
        e.preventDefault();
        let ltTitle = $(this).parent().children(".title");
        let title = $(this).children(".listTitle").val();
        ltTitle.html(title);
        $(this).hide();
        ltTitle.show();
    });

    $(document).on("click", ".addLabel", function (e) {
        e.preventDefault();
        $(this).hide();
        $(this).parent().children("form").show();
        $(this).parent().children("form").children("textarea").focus();
    });

    $(document).on("submit", ".addCard", function (e) {
        e.preventDefault();
        let addCardLabel = $(this).parent().children(".addLabel");
        let content = $(this).children(".addCardContent");
        if (content.val().length > 0) {
            $(this).parents(".list").children(".cardWrap").append(`<div class="cardContent">${content.val()}</div>`);
        }
        content.val("");
        $(this).hide();
        addCardLabel.show();
        $(".cardWrap").sortable({
            connectWith: ".cardWrap",
            placeholder: "card-placeholder"
        });
    });

    $(document).on("click", ".addCardBtn", function (e) {
        e.preventDefault();
        $(this).parent(".addCard").submit();
    });

    $(document).on("click", "#addCardClose", function (e) {
        e.preventDefault();
        $(this).parents(".addCard").children(".addCardContent").val("");
        $(this).parents(".addCard").hide();
        $(this).parents(".cardAddWrap").children(".addLabel").show();
    });

    addListLabel.click(function (e) {
        e.preventDefault();
        addListLabel.hide();
        addListForm.show();
        addListForm.children("#addListTitle").focus();

    });

    addListForm.submit(function (e) {
        e.preventDefault();
        let listTitle = $("#addListTitle");
        if (listTitle.val().length > 0) {
            $("#listWrap").append(`<div class="list">
                <div class="listTitleWrap">
                    <div class="title">${listTitle.val()}</div>
                    <form class="titleEdit">
                        <input class="listTitle" type="text" placeholder="Project Name...">
                    </form>
                </div>
                <div class="cardWrap">
                </div>
                <div class="cardAddWrap">
                    <div class="addLabel">+ Add another card</div>
                    <form class="addCard">
                        <textarea name="" class="addCardContent" cols="30" rows="10" placeholder="card content..."></textarea>
                        <button class="btn btn-green addCardBtn">Add Card</button><span class="close" id="addCardClose">&times</span>
                    </form>
                </div>
            </div>`);
        }
        listTitle.val("");
        addListForm.hide();
        addListLabel.show();
        $(".cardWrap").sortable({
            connectWith: ".cardWrap",
            placeholder: "card-placeholder"
        });
    });

    $("#addListClose").click(function (e) {
        $("#addListTitle").val("");
        addListForm.hide();
        addListLabel.show();
    });

    $("#listWrap").sortable({
        placeholder: "list-placeholder",
        handle: ".listTitleWrap",
    });

    $(".cardWrap").sortable({
        connectWith: ".cardWrap",
        placeholder: "card-placeholder"
    });
});

실행 시켜 보면 모든 동작이 정상 동작하는것을 확인 할 수 있다.

 

그럼 기존에 임시로 넣어 놨던 test 를 모두 삭제하고 프로젝트를 마무리 해보자

다음 시간에

모든 과정이 끝났다. 담 시간에는 정리를 해보자.