[jQuery]목록 리스트 위로 아래로 이동

리스트 up down 버튼 스크립트 위 아래로 이동

$("#up").click(function(){
    up();
})
$("#down").click(function(){
    down();
})

function up(){
    if($clickItem){
        var $prev = $clickItem.prev();
        if($prev){
            $clickItem.insertBefore($prev);
        }
    }else{
        alert("이름을 선택하세요");
    }
}
function down(){
    if($clickItem){
        var $next = $clickItem.next();
        if($next){
            $clickItem.insertAfter($next);
        }
    }else{
        alert("이름을 선택하세요");
    }
}

 

 

전체코드

<script>
    var $member=null;
    var $memberName=null;
    var $clickItem=null;
    $(document).ready(function(){
        init();
        initEvent();
    })

    function init(){
        $member=$(".member");
        $memberName=$("#memberName");
    }

    function initEvent(){
        $("#add").click(function(){
            add();
        })
        $("#modify").click(function(){
            modify();
        })
        $("#remove").click(function(){
            remove();
        })
        $("#up").click(function(){
            up();
        })
        $("#down").click(function(){
            down();
        })
        $member.on("click","li",function(){
            addClass($(this));
        })
    }

    function addClass($item){
        if($clickItem!=null){
            $clickItem.removeClass("on");
        }
        $clickItem=$item;
        $clickItem.addClass("on");
    }


    function add(){
        memberName = $memberName.val();
        if($clickItem){
            $clickItem.after(`<li>${memberName}</li>`);
        }else{
            $member.append(`<li>${memberName}</li>`);
        }
    }

    function modify(){
        memberName = $memberName.val();
        if($clickItem){
            $clickItem.text(memberName);
        }else{
            alert("수정할 이름을 선택하세요");
        }
    }
    function remove(){
        if($clickItem){
            $clickItem.remove();
            $clickItem=null;
        }else{
            alert("삭제할 이름을 선택하세요");
        }
    }
    function up(){
        if($clickItem){
            var $prev = $clickItem.prev();
            if($prev){
                $clickItem.insertBefore($prev);
            }
        }else{
            alert("이름을 선택하세요");
        }
    }
    function down(){
        if($clickItem){
            var $next = $clickItem.next();
            if($next){
                $clickItem.insertAfter($next);
            }
        }else{
            alert("이름을 선택하세요");
        }
    }

</script>

<div>
    <input type="text" id="memberName" />
    <button id="add">
        추가
    </button>
    <button id="modify">
        수정
    </button>
    <button id="remove">
        삭제
    </button>
    <button id="up">
        위로
    </button>
    <button id="down">
        아래로
    </button>
</div>
<ul class="member">
</ul>