반응형
jQuery UI의 최신 버전을 받습니다.
[ http://jqueryui.com ] jQuery의 홈페이지로 가서 최신 버전을 다운받습니다.
스샷 참고 클릭!
다운받은 jquery-ui-1.7.2.custom.zip 을 압출을 풀고 해당 프로젝트에 복사합니다.
요소를 드래그(끌기)하는 예제입니다.
[ http://jqueryui.com ] jQuery의 홈페이지로 가서 최신 버전을 다운받습니다.
스샷 참고 클릭!
다운받은 jquery-ui-1.7.2.custom.zip 을 압출을 풀고 해당 프로젝트에 복사합니다.
요소를 드래그(끌기)하는 예제입니다.
| 01.Draggable.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()
{ //[1] 끌기 가능 //$('img').draggable({});
//[2] x좌표로만 이동 //$('img').draggable({axis:"x"}); //[3] 자기 자리로 이동 $('img').draggable({
revert:true });
});
</script> </head> <body>
<img src="../images/jc3.jpg" /> </body> </html> |
| 결과화면 |
[그림72-2] |
01.Draggable.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 74.jQuery - sortable() 로 소팅 가능한 개체 생성 ( 11.UI ) (0) | 2009.11.17 |
|---|---|
| 73.jQuery - droppable()로 끌어서 놓기 기능 구현 ( 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 |
| 69.jQuery - 양쪽 공백 제거 함수 ( 10.Utileties ) (0) | 2009.11.17 |
Comments