6) 화면분할 및 drag & drop API

자연스러운 drag & drop을 위해서 화면을 분할했다. 세로로 분할을 위해 float 속성과 position 속성을 이용했다.

1 2 3

#left_left{float:left; width:25%; height:100%; position:absolute;} #left_mid{float:left; left:25%; width:30%; height:100%; position:absolute;} #left_right{float:left; left:55%; width:25%; height:100%; position:absolute;}

(CSS 소스코드)

float:left 속성을 이용해 왼쪽으로 나열했고 절대좌표(postition:absolute)를 이용해서 25%,30%,25%만큼 나누었고 left 속성을 이용해 왼쪽 여백을 설정했다. 

나머지 20%는 다른 용도로 쓰기 위해 남겨두었다.

대략 위와 같은 레이아웃이 나오게 된다.

원하는 건 left_mid 부분을 left_left 또는 left_right으로 drag & drop 하면 해당 페이지로 넘어가는 것이다. 우선 drag & drop에 관한 javascript 코드가 필요하다.

1 2 3 4 5 6

function drag(e){ }; function drop(e,link){ e.preventDefault(); window.location.href=link; };

(drop 시에 현재 창을 link 파라미터로 바꿔준다.)

1 2 3 4 5 6 7 8 9 10 11 12

<div id="left"> <!-- drag and drop 영역 --> <div id="left_left" ondrop="drop(event,'링크');" ondragenter="return false;" ondragover="return false;"> </div> <div id="left_mid" draggable="true" ondragstart="drag(event);"> </div> <div id="left_right" ondrop="drop(event,'링크');" ondragenter="return false;" ondragover="return false;"> </div> <img src="링크" width="100%" height="100%"/> </div>

(HTML 소스코드)

div의 중첩으로 인해 img태그의 사진만 보이지만 그 위에는 투명한 화면이 분할되어있다. 따라서 사진을 drag & drop 하게 되면 걸어둔 링크로 페이지가 넘어가게 된다.

딱 생각한대로 만들었고 오류 없이 결과가 잘 나왔다. 나름 재미있는 기능이었다고 생각한다.

끝.