코드펜 https://codepen.io/gamza/pen/NgyMaj
▣ 구상
- 드래그로 이동 가능한 포스트잇을 만듭니다.
- 드래그 중인 요소의 색상을 구별합니다.
- 가장 나중에 드래그된 요소를 상위로 보이게 합니다.
▣ 조건
➊ 컨텐츠
➋ 드래그 기능
➌ 색상 변화
➍ stack ( 나중에 드래그된 요소를 화면의 최상위로 )
▣ 준비
· 컨텐츠에 들어갈 이미지 1장
· 드래그 기능을 사용하기 위해서
jquery-ui.min.js 를 추가합니다. ( v1.8.23 )
◆ 레이아웃 ( html, css )
1. 4장의 post-it ( div.post )을 추가합니다.
2. post-it 의 내용물을 추가합니다.
3. float 시켜 나란히 배열합니다.
4. 그림자 효과를 추가하기 위해 post-it 마다 box-shadow 를 추가합니다.
5. 드래그 동작중 색상을 구별하기 위한 클래스 .color 를 작성합니다.
● html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="post"> <p>hello</p></div><div class="post"> <p>Lorem ipsum dolor <br /> sit amet, consecteturlit. Aenean</p> </div><div class="post"> <p>Drag me</p></div><div class="post"> <p>What a Wonderful</p></div> |
● css
1 2 3 4 5 6 7 8 9 10 11 12 | div.post { float:left; width:150px; height:150px; padding:10px 0px 0px 20px; background-color:#f9d716; border:1px solid black; box-shadow:2px 2px 2px;}div.color { background-color:salmon;} |
◆ 기능( jquery )
1. post-it ( div.post ) 에 드래그 기능과 세부설정 추가
2. 드래그 시작시 .color 클래스 추가,
3. 드래그 멈춤시 .color 클래스 삭제로 드래그 동작중에 다른 post-it 과 색상을 구별합니다.
● javascript
1 2 3 4 5 6 7 8 9 10 11 12 | $(".post").draggable({ // 드래그 cursor:"move", // 드래그 시 커서모양 stack:".post", // .post 클래스끼리의 스택 기능 opacity:0.8 // 드래그 시 투명도 }); $(".post").bind("dragstart",function(event, ui){ $(this).addClass("color"); //bgi 체인지 }); $(".post").bind("dragstop", function(event, ui){ $(this).removeClass("color"); //bgi 체인지 }); |
