.draggable()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

.draggable() 은 지정된 요소를 드래그할 수 있도록 만들어 줍니다.
jQuery UI 의 기능입니다.

+_+
예제 1
기본 예제
보기
튀김을 마우스로 눌러 움직여 보세요.

소스
<style type="text/css">
    .css_test img {
        cursor : move;
        z-index : 1;
    }
</style>

튀김을 마우스로 눌러 움직여 보세요.<br><br>

<div class="css_test">
    <img src="http://superkts.com/img/css/fff22.gif" />
    <img src="http://superkts.com/img/css/fff22.gif" />
    <img src="http://superkts.com/img/css/fff22.gif" />
    <img src="http://superkts.com/img/css/fff22.gif" />
</div>

<script type="text/javascript">

    $( '.css_test img' ).draggable();

</script>
관련 CSS
jQuery
기본 사용법은 아주 쉽습니다.

$( '.css_test  img' ).draggable()  -  클래스명이 css_test 인 요소의 이미지드래그 기능 적용
예제 2
겹쳤을때 클릭한것 제일 위로오게 하기
보기
음식들을 마우스로 눌러 움직여 보세요. 겹치게 만들고 눌러보세요.

소스
음식들을 마우스로 눌러 움직여 보세요. 겹치게 만들고 눌러보세요.<br><br>

<div class="css_test">
    <img src="http://superkts.com/img/css/fff27.gif" />
    <img src="http://superkts.com/img/css/fff22.gif" />
    <img src="http://superkts.com/img/css/fff27.gif" />
    <img src="http://superkts.com/img/css/fff22.gif" />
    <img src="http://superkts.com/img/css/fff28.gif" />
</div>

<script type="text/javascript">

    var css_test_idx = 10;

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable()
    .css( 'cursor', 'move' )
    .mousedown(function(){ // mousedown 이벤트 생성
        $(this).css('z-index', css_test_idx); // 클릭한 이미지만 z-index 증가시킴
        css_test_idx++;
        // 그러면 이미지가 겹칠경우 클릭한 것이 항상 위에 표시됨
    });

</script>
jQuery
- 이미지들이 겹쳐있을때 클릭한 것을 위로 올리는 예제입니다.
- 구현하기에 따라 여러방법이 있을 수 있습니다.
예제 3
지정된 영역안에서만 드래그
보기
얼굴은 네모 밖으로 나갈 수 없습니다. (불쌍)

소스
<style type="text/css">
    .css_test img {
        cursor : move;
        width : 100px;
    }
    .css_test {
        border : 5px solid gray;
        display : inline-block;
        height : 300px;
        margin : 5px;
        width : 300px;
        border-radius : 7px;
    }
</style>

얼굴은 네모 밖으로 나갈 수 없습니다. (불쌍)<br><br>

<div class="css_test">
    <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
</div>

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        containment : 'parent' // 부모요소 안에 종속
    })

</script>
관련 CSS
jQuery

$( '.css_test  img' ).draggable({ containment : 'parent' })
- 요소가 parent 즉 그의 부모안에서 만 드래그 되도록 하는 설정입니다.

예제 4
드래그 종료시 이벤트
보기
맥주잔을 드래그 했다가 놓으면 원래 위치로 돌아가면서 커집니다. ㄷㄷ

소스
<style type="text/css">
    .css_test {
        height : 200px; /* 높이를 지정하면 이미지가 커져도 화면을 밀어내지 않음 */
    }
</style>

맥주잔을 드래그 했다가 놓으면 원래 위치로 돌아가면서 커집니다. ㄷㄷ<br><br>

<div class="css_test">
    <img src="http://superkts.com/img/css/b291.gif" />
</div>

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        stop : function(){ // 드래그 종료시 실행
            $(this).animate({ top : 0, left : 0, width : '+=50' }, 250, 'easeOutBack' ); // 커지게 만들고 원위치로
            // 제이쿼리UI 의 이징효과 사용
        }
    })
    .css( 'cursor', 'move' );

</script>
관련 CSS
jQuery

$( '.css_test  img' ).draggable({ stop : function(){ 코드 } })
- 드래그가 끝났을때 (마우스를 놓았을때) 지정한 코드를 실행합니다.

예제에 사용된 것들
.animate() easing(이징) 효과 모음

예제 5
드래그중의 이벤트
보기
각 얼굴을 움직여 보세요. 나머지 얼굴도 같이 움직입니다.

소스
<style type="text/css">
    .css_test img {
        cursor : move;
        width : 100px;
    }
    .css_test div {
        border-radius : 7px;
        border : 5px solid gray;
        display : inline-block;
        height : 200px;
        margin : 3px;
        position : relative;
        text-align : left;
        width : 200px;
    }
</style>

각 얼굴을 움직여 보세요. 나머지 얼굴도 같이 움직입니다.<br><br>

<div class="css_test">
    <div>
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div>
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div><div>
        <img src="http://biketago.com/img/etc/huk1.gif" onmousedown="this.src='http://biketago.com/img/etc/huk2.gif'" onmouseout="this.src='http://biketago.com/img/etc/huk1.gif'" />
    </div>
</div>

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        containment : 'parent', // 부모요소 안에 종속
        drag : function(){
            var pos = $(this).position(); // 드래그 하는 이미지의 위치값 알아내기
            // 현재 드래그 하는 이미지를 제외하고 위치값 설정
            $( '.css_test img' ).not( this ).css({ top : pos.top, left : pos.left });
        }
    })

</script>
관련 CSS
jQuery

$( '.css_test  img' ).draggable({ drag : function(){ 코드 } })
- 드래그 진행중일때 지정한 코드을 실행합니다.

예제 6
jQuery
예제는 계속 등록중 입니다.
jQuery 홈페이지 .draggable() API 문서 : https://jqueryui.com/draggable/