drag & drop 포스트잇

코드펜  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 

    <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>
		<img src="http://sevensprings.dothome.co.kr/img/6.jpg" width="130" height="80" />
	</div>

● css

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 과 색상을 구별합니다.

$(".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 체인지
	});