easyTree.js 사용하여 트리메뉴 구조 중, 이동 처리시 샘플 html
제목 : 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