jQuery 예제 모음

시삽: 레드플러스 님 
게시판 이동:
 제목 : jQuery UI의 draggable() 메서드의 주요 옵션 적용해 보기
글번호: 6
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2012/05/15 오전 7:09:58
조회수: 14409
<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>Drag & Drop</title>
    <style type="text/css">
        #theDrags { width: 600px; height: 120px; background-color:Yellow; }
        .product { width:100px; height:100px; border:1px solid red; display:inline-block; background-color:Green; }
        #theDrop { width:200px; height:200px; border:5px solid red; }
        .redBorderStart { opacity:0.5; }
        .redBorder { opacity:1.0; }
    </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(); // 드래그 가능 요소
            $('#product1').draggable({ axis: "x", stack: ".ui-draggable", revert: "invalid" }); // 축
            $('#product2').draggable({ axis: "y" });
            $('#product3').draggable({ containment: "#theDrags", helper: "clone" }); // 포함
            $('#product4').draggable({ grid: [50, 100], helper: function () {
                    return $('<div>가로 50픽셀, 세로 100픽셀 단위로 이동되죠?</div>');
                }
            }); // 이동단위 설정
            $('#product5').draggable({
                snap: "#product4, #product3", handle: "a"
            }); // 특정 요소에 붙임
            // 특정 요소를 한꺼번에 주고자한다면?
            $('#product1, #product2, #product3').draggable("option", "stack", ".ui-draggable");

            // 드롭될 영역 설정
            $('#theDrop').droppable({
                accept: "#product4, #product5",
                activeClass: "redBorder",
                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" id="product1">상품1</div>
        <div class="product" id="product2">상품2</div>
        <div class="product" id="product3">상품3</div>
        <div class="product" id="product4">상품4</div>
        <div class="product" id="product5"><a href="#">상품5</a><p>좋은상품...</p></div>
    </div>

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


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 jQuery UI sortable()과 resizable() - Administrator 2012-05-16 6253
현재글 jQuery UI의 draggable() 메서드의 주요 옵션 적용해 보기 - Administrator 2012-05-15 14409
다음글 jQuery UI의 Drag & Drop 기능 - Administrator 2012-05-15 7931
 
손님 사용자 Anonymous (손님)
로그인 Home