jQuery draggable, droppable, resize, sortable 사용예제
jQuery draggable, droppable, resize, sortable 사용예제
아래 css파일이 있어야지 resize 및 다른 것들도 적용된다.
결과화면
소스
<html>
<head>
<title>Jquery UI</title>
<link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#box2
{
border:1px solid black; width:100px; height:100px;
}
#list .ui-selecting
{
background: yellow;
}
#list .ui-selected
{
background: orange;
}
</style>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#box").css("border", "1px solid black").css("background-color", "yellow").css("width", "100px").css
("height", "100px").css("position", "absolute").css("left", "200px").css("top", "150px");
//$("#img1").draggable();
$("img").draggable();
$(document).ready(function ()
{
$("#img1").draggable();
$("#box").droppable(
{
drop: function ()
{
alert("확인!");
}
});
});
//두번째
$(document).ready(function ()
{
$("#box2").resizable();
});
//세번째
$(document).ready(function ()
{
//아이템 위치를 마음대로 변경~!~
//겉모습만 변경된다. 실데이타는 그대로이다.
$("#list").sortable();
//$("#list").selectable();
});
});
</script>
</head>
<body>
<!--ui.htm-->
<img src="images/adore.png" id="img1" />
<img src="images/angry.png" id="img2" />
<img src="images/faint.png" id="img3" />
<img src="images/cool.png" id="img4" />
<img src="images/cry.png" id="img5" />
<hr />
<div id="box"></div>
<img src="images/adore.png" id="img6" />
<hr />
<div id="box2"></div>
<hr />
<ul id="list">
<li>멍멍이 밥주기</li>
<li>심부름 다녀오기</li>
<li>도서관 책 반납하기</li>
<li>방 청소하기</li>
</ul>
</body>
</html>