3초기억력

easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html 본문

코딩_javascript

easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html

잠수콩 2016. 12. 1. 14:21
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



제목 : easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html




소스 :


    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/easyTree.css">

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery-ui.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/easyTree.js"></script>


    <script type="text/javascript">

        $(document).ready(function() {


$('li').draggable({

containment: 'parent',

opacity:"0.3"

}); // 끄는 동안만 불투명도 주기


            $('li').droppable({

greedy:true,

tolerance: 'pointer',

                drop: fnDrop

            });



function fnDrop(event, ui) {

var draggableId = ui.draggable.attr("data-id");

var droppableId = $(this).attr("data-id");

                    console.log("draggableId : "+draggableId+", droppableId : "+droppableId);


if (draggableId != "" && droppableId != "")

{

var r = confirm(draggableId+"를 "+droppableId+"로 이동하시겠습니까?");

if (r == true)

{

alert("이동 처리")

}

}

                }


        });

    </script>

</head>

<body>

<div class="col-md-3">

    <h3 class="text-success">메뉴</h3>

    <div class="easy-tree">

        <ul>

            <li><span>Example 1</span>

                <ul>

                    <li data-id="2" data-pid="1"><span>Example 2</span></li>

                    <li data-id="3" data-pid="1"><span>Example 3</span></li>

                    <li data-id="4" data-pid="1"><span>Example 4</span>

                        <ul>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                        </ul>

                    </li>

                    <li data-id="5" data-pid="1"><span>Example 5</span></li>

                    <li data-id="6" data-pid="1"><span>Example 6</span></li>

                    <li data-id="7" data-pid="1"><span>Example 7</span>

                        <ul>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                            <li><span>Example 8</span></li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</div>

<script>

    (function ($) {

        function init() {

            $('.easy-tree').EasyTree();

        }


        window.onload = init();

    })(jQuery)

</script>




내용 :




ul > li 로 구성되어있는 트리메뉴 구조에서 drag & drop 으로 메뉴 이동하는 html 기본 소스


easyTree 를 사용하고,


li의 크기가 child 갯수가 많아질 수록 li 의 범위가 넓어짐.


단순 droppable 만 사용하면, li 하위 child 의 li 또는 상위 parent 의 li 의 것을 모두 event 처리가 됨.


jquery-ui 중 droppable 을 사용하여, 


greedy:true, tolerance: 'pointer' 를 추가하면 해결됨





예제 소스 파일 : 

easy-tree-master.zip



 출처 :  https://github.com/zgs225/easy-tree




Comments