구글맵 활용, draggable, droppable

구글맵의 활용
center: { lat: 48.85, lng: 2.35 }, 
          //latitude: 위도, longitude: 경도
          //구글맵에서 내가 원하는 위치를 검색후 url에서 3d옆의 값이 위도, 4d옆의 값이 경도
          zoom: 12 //확대크기 버튼 누른 횟수

          /*mapTypeId: 'satellite'//위성뷰*/
          /*mapTypeId: 'terrain'//지형정보+로드맵*/
          /*mapTypeId: 'hybrid'//위성뷰+로드맵*/
          mapTypeId: 'roadmap'//기본도로지도:기본값

draggable
마우스를 사용하여 요소를 이동할 수 있다.
Auto-scroll
드래그 가능 항목이 뷰포트 밖으로 이동할 때 문서를 자동으로 스크롤 한다. 자동 스크롤을 활성화하려면 옵션을 true로 설정하고 스크롤이
트리거될 때 및 옵션 scroll을 사용하여 스크롤 속도를 미세 조정한다.
Constrain movement
끌 수 있는 영역의 경계를 정의하여 각 끌 수 잇는 개체의 움직임을 제한한다. 
(축을 따라 이동 제한을 하거나 다른 DOM요소 내에서만 이동할 수 있게 제한)
Cursor style
개체를 드래그하는 동안 커서를 놓는다. 기본적으로 커서는 끌어온 개체의 중앙에 나타난다.
옵션을 사용하여 cursorAt 드래그할 수 있는것과 관련된 다른 위치를 지정할수있다.(상하좌우 또는 왼쪽에서 픽셀값 지정)
Revert position
부울 옵션으로 끌기를 중지할 때 컨텐츠를 원래 위치로 되돌린다.

droppable
DOM요소를 지정된 대상에 놓을수 있도록 하는 droppable()메서드를 제공한다.

.setTimout메서드는 원하는 시간 이후에 함수를 실행시킨다.
.reload메서드는 location 객체를 주체로 사용하며 페이지를 다시 로딩시켜준다.

facnybox
-부트스트랩에서 제공되는 모달은 갤러리 형식으로 사용되기보다는 범용으로 사용할 때 좋지만,
fancybox는 사진 갤러리와 같이 연속된 이미지 또는 내용을 적용할 때 편리한 현재 제이쿼리 모달 중 가장 인기있는 플러그인

작업 순서
1)플러그인 파일을 다운받아 플러그인 연결 (기본 제이쿼리 플러그인보다 항상 아래쪽에 위치시킨다!)
2)html태그 내부 구조 수정
3)별도의 스크립트 추가
4)플러그인 작동 안할시 링크 주소 맞는지 확인하고 수정
5)갤러리를 두 개 이상 따로 운영하고 싶을때에는 속성값을 서로 다른 이름으로 설정하여 그룹핑한다
6)플러그인에서 지원하는 다양한 옵션을 이용하면 모달창의 스타일을 다양하게 변형하거나 타이틀을 추가,
fade in, fade out, hide 등의 옵션을 다양하게 활용하여 스타일링 가능하다.

'cyclic' : true, //끝이여도 계속 다음컷으로 이동 가능
'overlayOpactry' : 0.7, //투명도
'overlayColor' : 'orange' //모달창 밖 배경색