jQuery 공작소 : .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="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
</div>
<script type="text/javascript">
$( '.css_test img' ).draggable();
</script>
.css_test img {
cursor : move;
z-index : 1;
}
</style>
튀김을 마우스로 눌러 움직여 보세요.<br><br>
<div class="css_test">
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
</div>
<script type="text/javascript">
$( '.css_test img' ).draggable();
</script>
관련 CSS
jQuery
기본 사용법은 아주 쉽습니다.
$( '.css_test img' ).draggable() - 클래스명이 css_test 인 요소의 이미지에 드래그 기능 적용
$( '.css_test img' ).draggable() - 클래스명이 css_test 인 요소의 이미지에 드래그 기능 적용
예제 2
겹쳤을때 클릭한것 제일 위로오게 하기
보기
음식들을 마우스로 눌러 움직여 보세요. 겹치게 만들고 눌러보세요.
소스
음식들을 마우스로 눌러 움직여 보세요. 겹치게 만들고 눌러보세요.<br><br>
<div class="css_test">
<img src="//superkts.com/img/css/fff27.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff27.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//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>
<div class="css_test">
<img src="//superkts.com/img/css/fff27.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//superkts.com/img/css/fff27.gif" />
<img src="//superkts.com/img/css/fff22.gif" />
<img src="//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="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
</div>
<script type="text/javascript">
// 보기편하게 여러줄로 코딩
$( '.css_test img' )
.draggable({
containment : 'parent' // 부모요소 안에 종속
})
</script>
.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="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/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="//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_test {
height : 200px; /* 높이를 지정하면 이미지가 커져도 화면을 밀어내지 않음 */
}
</style>
맥주잔을 드래그 했다가 놓으면 원래 위치로 돌아가면서 커집니다. ㄷㄷ<br><br>
<div class="css_test">
<img src="//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="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
</div><div>
<img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
</div><div>
<img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/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_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="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
</div><div>
<img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/huk1.gif'" />
</div><div>
<img src="//superkts.com/img/huk1.gif" onmousedown="this.src='//superkts.com/img/huk2.gif'" onmouseout="this.src='//superkts.com/img/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/