| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 한글입력체크
- MSSQL보안
- ERD
- array
- wap
- tempDB
- sql업데이트
- XML
- SPLIT
- 자바기초
- sql순위
- 인젝션
- 이미지가로길이
- VarType
- 정규식
- injection
- sql랭킹
- FileSystemObject
- JavaScript
- update
- join
- inner join
- WML
- javascript 한글입력체크
- xmldom
- asp함수
- jdbc driver
- VARIABLE
- 이미지세로길이
- instr
- Today
- Total
3초기억력
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
'코딩_javascript' 카테고리의 다른 글
| HTML5 Web Storage Objects - localstorage 사용법 (0) | 2017.11.08 |
|---|---|
| 매번 까먹는 javascript - checkbox 멀티 선택 value 처리 (0) | 2017.01.26 |
| HTML TAG 삭제 자바스크립트 (0) | 2016.08.22 |
| 다른 form 의 name, value 를 가져오는 방법 (0) | 2016.04.14 |
| WEB - HTML5 Desktop Notifications (0) | 2015.09.10 |