accept - 드롭시킬 대상 요소
activeClass - 마우스로 끌 동안 대상의 요소
hoverClass - 끌어 놓을 부분에 대한 마우스 오버시
tolerance(string) : "intersect", "fit", "touch" - 드롭시 위치 결정
active:function(e, ui){} - 드래그 하는 순간 호출
deactivate:function(e, ui){} - 드래그 하여 놓는 순간 호출
over - 드롭 가능한 상태
out - 드롭 불가능한 상태
drop - 드롭해서 놓는 상태
| 02.Droppable.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()
{ $('img').draggable({
opacity:"0.3" }); // 끄는 동안만 불투명도 주기 $('div').droppable({ accept: "img",
// 드롭시킬 대상 요소 drop: function(event, ui) { $(this).append("끌어서놓기 됨"); } });
});
</script> </head> <body>
<img src="../images/jc3.jpg" />
<div style="position:absolute;
top:15px;
left:430px;
border:5px solid gray;
width:425px;
height:325px;
text-align:center;">
</div> </body> </html> |
| 결과화면 |
[그림73-1] |
02.Droppable.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 75.jQuery - selectTable()로 개체 선택하기 ( 11.UI ) (0) | 2009.11.17 |
|---|---|
| 74.jQuery - sortable() 로 소팅 가능한 개체 생성 ( 11.UI ) (0) | 2009.11.17 |
| 72.jQuery - draggable() 메서드로 드래그 ( 11.UI ) (0) | 2009.11.17 |
| 71.jQuery - Param.htm ( 10.Utileties ) (0) | 2009.11.17 |
| 70.jQuery - $.noConflict() ( 10.Utileties ) (0) | 2009.11.17 |
Comments