jQuery | javascript | CSS
74.jQuery - sortable() 로 소팅 가능한 개체 생성 ( 11.UI )
Godffs
2009. 11. 17. 13:38
반응형
sortable 주요 속성 및 이벤트
axis - x축과 y축 중 하나로만 이동
opacity - 불투명도
cancel - Sort대상에서 제외하고자 할 때 id설정, 해당 컨트롤은 드래그 X
handle:"span" - 해당영역 <span>태그 부분을 핸들로 설정, <span>부분 끌기 가능
helper:function(e, ui) - 소팅되는 동안 해당 요소의 정보를 알 수 있는 이벤트
start, sort, change - 소팅을 위해서 드래그 하는 순간 발생하는 이벤트
update - 소팅 후 드롭 할 때(update) 발생하는 이벤트
stop - 완료 되었을때 발생
axis - x축과 y축 중 하나로만 이동
opacity - 불투명도
cancel - Sort대상에서 제외하고자 할 때 id설정, 해당 컨트롤은 드래그 X
handle:"span" - 해당영역 <span>태그 부분을 핸들로 설정, <span>부분 끌기 가능
helper:function(e, ui) - 소팅되는 동안 해당 요소의 정보를 알 수 있는 이벤트
start, sort, change - 소팅을 위해서 드래그 하는 순간 발생하는 이벤트
update - 소팅 후 드롭 할 때(update) 발생하는 이벤트
stop - 완료 되었을때 발생
| 03.Sortable.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>개체 정렬</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $('ul').sortable({ axis: "y", opacity: 0.5 }); $('tr').sortable({axis:"x", opacity:0.5});
});
</script> </head> <body>
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<table border="1">
<tr> <td>첫번째 셀</td><td>두번째 셀</td>
</tr>
</table> </body> </html> |
| 결과화면 |
[그림74-1] |
03.Sortable.htm반응형