[송규남의 IT 다이어리] 제이쿼리(jQuery) 열네번째 이야기

강소라

2016-10-27 10:24:29

안녕하세요?

중앙HAT 강사 송규남입니다.

지난 강좌에서는 jQuery(제이쿼리)에서 제공하는 UI에 대하여 알아보았는데요.

이번 송규남의 다이어리 14번째 이야기는 jQuery(제이쿼리)에서 제공하는 UI중에서 Draggable에 대해서 알아보겠습니다.

jQuery(제이쿼리) 사이트에 가시면 아래처럼 Interactions에 Draggable과 Droppable 메뉴가 있습니다.

순수 자바스크립트로 드래그(Draggable) 앤 드롭(Droppable)을 구현하려면 조금 복잡한데요 jQuery UI에서는 쉽게 드래그앤드롭
기능을 구현할 수 있습니다.

자 그러면 간단하게 드래그(Draggable) 기능을 구현해 보겠습니다.

먼저 아래와 같이 html페이지를 만듭니다. ( jquery(제이쿼리) 관련 자바스크립트 파일과 jquery(제이쿼리) ui관련 css파일은 아래와 같지 않더라도 제대로 링크만 잘 걸리도록 해주시면 됩니다. )

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

//$(function(){은 $(document).ready(function(){ 을 축약해서 쓴 형태입니다.

$(function(){

$("#box1").draggable(); //id가 box1인 요소가 드래그(Draggable) 될 수 있도록 합니다.

});

</script>

</head>

<body>

<p>나를 드래그하세요</p>

</div>

</body>

</html>

실행시킨후 p로 감싸진 문자열을 드래그(Draggable) 해보세요. 아주 간단하게 드래그(Draggable) 기능이 되죠?

여기에 좀더 코드를 좀더 추가해 보겠습니다. 아래와 같이 img를 감싸는 div를 하나 추가합니다.

자바스크립트(javascript) 코드에 아래처럼 코드를 추가합니다.

draggable하면서 옵션을 설정할 수가 있는데 cotainment속성을 사용해서 드래그(Draggable) 영역을 설정할 수 있습니다.

옵션에 대한 설명은 아래와 같습니다.

$("#img1").draggable({

containment:"parent", //부모영역안에서만 드래그가능

axis:"x", // 드래그 방향(좌우로만 드래그 )

stop:function(){ //드래그를 멈추면 function수행

alert("stop!!!!!!!!");

}

});

실행해보면 이미지는 x방향으로만 이동되고 드래그만 멈추면 경고창이 뜨는 것을 확인할 수 있습니다.

자 그럼 드래그(Draggable) 를 이용한 예제를 하나 만들어 보겠습니다.

일단 실행된 화면은 아래와 같습니다. 이미지는 총 10개의 이미지이고 좌우로 드래그(Draggable) 가 가능하고 이전이미지와 다음이미지 버튼을 누르면 앞 또는 뒤로 이동할 수 있도록 하겠습니다.

위의 예제를 만들려면 일단 css에 대한 이해가 있어야 하는데요

먼저 이미지슬라이드를 감싸는 부모div는 이미지5개가 보일 크기를 갖고

이미지슬라이드는 10개의 이미지가 보여질 크기를 갖습니다.

파란색영역이 부모이고 이미지 슬라이드는 부모영역을 벗어난 크기를 갖게 합니다. 일단 위와 같은 모양의 html페이지를 만듭니다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

*{margin:0;padding:0}

#slide ul li img{width:185px;height: 240px}

#slide ul li{list-style: none;float:left;}

/* #slide는 이미지 슬라이드로 만들어지며 이미지 10개의 크기를 담을 width 설정.하나의 img가 185px이므로

1850px로 크기 설정 */#slide{width:1850px;height: 240px;position: relative;left:0px;}

/* slidebox는 이미지 5개의 크기를 담을 width 설정. */

#slidebox{width:925px;height: 240px;position: relative;left:200px;

top:40px;border:4px solid blue;}

.bb{width:500px;text-align: center;margin-top:70px;margin-left: 400px;}

</style>

$(function(){

$(".bb a").button();//a태그를 버튼으로 만들기

});

</script>

</head>

<body>

<ul>

</ul>

</div>

<a href="#" id="btnPrev">이전이미지</a>

<a href="#" id="btnNext">다음이미지</a>

</div>

</body>

</html>

자바스크립트(javascript) 에 아래의 코드를 추가합니다.

$(function(){

$(".bb a").button();

//드래그 방향을 x축으로 하고 드래그 가능한 4개의 좌표를

// 설정한다. 좌표는 아래와 같이 지정한다.

// containment:[x1,y1,x2,y2]

$("#slide").draggable({

axis:"x",

containment:[-725,40,200,40]

});

여기까지 하면 이미지가 좌우로 드래그(Draggable) 가 됩니다.

여기에 버튼을 눌렀을 때 이미지가 움직이도록 코드를 추가합니다.

$("#btnPrev").click(function(event){

event.preventDefault();

//left값 얻어오기

var left=parseInt($("#slide").css('left'));

if(left>=0) return;

//현재 위치에 185를 더해서 이전이미지가 보여지도록 합니다.

left += 185;

var pos=Math.floor(left/185.0)*185;//이동할 위치구하기

// // 이미지슬라이드가 우측방향으로 하나의 이미지크기만큼 이동해서 이전이미지가 보입니다.

$("#slide").animate({"left":pos},1000);

});

$("#btnNext").click(function(event){

event.preventDefault();

//left값 얻어오기

var left=parseInt($("#slide").css('left'));

if(left<=-925) return;

left -= 185;

var pos=Math.ceil(left/185.0)*185;

// 이미지슬라이드가 좌측방향으로 하나의 이미지크기만큼 이동해서 다음이미지가 보입니다.

$("#slide").animate({"left":pos},1000);

});

자 잘 실행이 되시나요?

전체 완성된 코드를 다시 한번 보여드립니다

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

*{margin:0;padding:0}

.buttons{padding:10px;border:2px solid #ff9999;background:#ffcc00;

margin-left:10px;border-radius:5px}

a{text-decoration: none;font-size: 0.8em;font-weight: bold;color:red}

.button:hover{background-color: white;}

#slide ul li img{width: 185px;height: 240px}

#slide ul li{list-style: none;float:left}

/* 자식div : 이미지10개가 담길 크기(185*10) */

#slide{width:1850px;height: 240px;position: relative;left:0px;}

/* 부모div : 이미지가 5개 담길 크기(185*5) */

#slidebox{width:925px;height: 240px;position: absolute;

left:200px;top:40px;overflow: hidden}

.fg-button {

outline: 0;

margin:0 4px 0 0;

padding: .4em 1em;

text-decoration:none !important;

cursor:pointer;

position: relative;

text-align: center;

zoom: 1;

}

</style>

$(function(){

//containment:[x1,y1,x2,y2]

$("#slide").draggable({

axis:"x",

containment:[-725,40,200,40], //드래그 범주 지정

cursor:"move"

});

$("#btnPrev").click(function(event){

event.preventDefault();

//left값 얻어오기

var left=parseInt($("#slide").css('left'));

if(left>=0) return;

left += 185;

var pos=Math.floor(left/185.0)*185;//Math.floor():내림값구하기

$("#slide").animate({"left":pos},1000);

});

$("#btnNext").click(function(event){

event.preventDefault();

//left값 얻어오기

var left=parseInt($("#slide").css('left'));

if(left<=-925) return;

left -= 185;

var pos=Math.ceil(left/185.0)*185; //Math.ceil():올림값구하기

$("#slide").animate({"left":pos},1000);

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

<a href="#" id="btnPrev" class='fg-button ui-state-default ui-corner-all'>이전이미지</a>

<a href="#" id="btnNext" class="button">다음이미지</a>

</div>

</body>

</html>

이러한 소스를 보면서 만들어보시면 드래그(Draggable) 앤 드롭(Droppable) 기능을 구현 할 수 있습니다.

“송규남의 다이어리 14번째” 이야기는 여기서 마무리 하겠습니다.

다음 강좌에 봐요 *^^*

아이티다이어리.jpg (26617K)

이전글[송규남의 IT 다이어리] 제이쿼리(jQuery) 열다섯번째 이야기 2017.01.19
다음글[송규남의 IT 다이어리] 제이쿼리(jQuery) 열세번째 이야기2016.09.05

A Column