jQuery 예제 모음

시삽: 레드플러스 님 
게시판 이동:
 제목 : jQuery UI의 Drag & Drop 기능
글번호: 5
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2012/05/15 오전 5:58:01
조회수: 4397
<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>Drag & Drop</title>
    <style type="text/css">
        .product { width:100px; height:100px; border:1px solid red; display:inline-block; }
        #theDrop { width:200px; height:200px; border:1px solid red; }
    </style>
    <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#theDrags').children().draggable(); // 드래그 가능 요소
            //$('#theDrop').droppable(); // 드롭 가능 요소
            $('#theDrop').droppable({
                drop: function (event, ui) {
                    ui.draggable.hide("explode", "slow");
                }
            });
        });
    </script>
</head>
<body>
    <h1>jQuery UI Interactions</h1>
    <h3>Drag &amp; Drop</h3>

    <div id="theDrags">
        <div class="product">상품1</div>
        <div class="product">상품2</div>
        <div class="product">상품3</div>
    </div>

    <div id="theDrop">
        장바구니
    </div>
</body>
</html>
 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 jQuery UI의 draggable() 메서드의 주요 옵션 적용해 보기 - Administrator 2012-05-15 6917
현재글 jQuery UI의 Drag & Drop 기능 - Administrator 2012-05-15 4397
다음글 jQuery UI의 hide 메서드로 특정 요소 없애기 - Administrator 2012-05-15 1304
 



손님 사용자 Anonymous (손님)
로그인 Home