<link rel="stylesheet" href="assets/css/jquery-ui.css" /><script src="js/jquery/1.8.3/jquery.min.js"></script><script src="js/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div id="main"> <div class="folder">  <div class="front"></div>  <div class="back"></div> </div>  <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" />   <img src="assets/48px/calculator.png" style="top:340px;left:170px;" alt="calculator" />   <img src="assets/48px/clipboard.png" style="top:340px;left:240px;" alt="clipboard" />   <img src="assets/48px/console.png" style="top:340px;left:310px;" alt="console" />   <img src="assets/48px/basketball.png" style="top:340px;left:380px;" alt="basketball" />   <img src="assets/48px/facebook.png" style="top:400px;left:100px;" alt="facebook" />   <img src="assets/48px/gift.png" style="top:400px;left:170px;" alt="gift" />   <img src="assets/48px/id_card.png" style="top:400px;left:240px;" alt="id card" />   <img src="assets/48px/imac.png" style="top:400px;left:310px;" alt="imac" />   <img src="assets/48px/system_monitoring.png" style="top:400px;left:380px;" alt="system monitoring" /> </div>

/*----------------------------  CSS3文件夾-----------------------------*/   .folder {  /* This will enable the 3D effect. Decrease this value    * to make the perspective more pronounced: */     -webkit-perspective: 800px;  -moz-perspective: 800px;  perspective: 800px; /*鏡頭距離800PX*/     position: absolute;  top: 50%;  left: 50%;  z-index: 0;     width: 160px;  height: 120px;  margin: -100px 0 0 -60px;} .folder div{  width:150px;  height:115px;     background-color:#93bad8;     /* 3D變化保留元素的位置 */  -webkit-transform-style: preserve-3d;  -moz-transform-style: preserve-3d;  transform-style: preserve-3d;     /*平滑的動畫過渡 */  -webkit-transition:0.5s;  -moz-transition:0.5s;  transition:0.5s;      /*禁止用戶選中元素*/  -webkit-user-select: none;   -moz-user-select: none;   user-select: none;      position:absolute;  top:0;  left:50%;  margin-left:-75px;}  .folder .front{     /*圓角，X軸3D轉(zhuǎn)換30度 */  border-radius:5px 5px 0 0;  -moz-transform:rotateX(-30deg);  -webkit-transform:rotateX(-30deg);  transform:rotateX(-30deg);      /*定義在X軸與Y軸的位置 */  -moz-transform-origin:50% 100%;  -webkit-transform-origin:50% 100%;  transform-origin:50% 100%;      /*定義漸變效果 */  background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);  background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);  background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);      /*定義陰影 */  box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;     z-index:10;     font: bold 26px sans-serif;  color: #5A88A9;  text-align: center;  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);  line-height: 115px;} .folder .back{   /*定義漸變效果 */  background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);  background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);  background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);     /*定義圓角*/  border-radius:0 5px 0 0;  /*定義陰影 */  box-shadow:0 -1px 1px rgba(0,0,0,0.15);}  /*在.back前加上內(nèi)容 */.folder .back:before{  content:'';  width:60px;  height:10px;  border-radius:4px 4px 0 0;  background-color:#93bad8;  position:absolute;  top:-10px;  left:0px;  box-shadow:0 -1px 1px rgba(0,0,0,0.15);}  /*在.back后加上內(nèi)容 */.folder .back:after{  content:'';  width:100%;  height:4px;  border-radius:5px;  position:absolute;  bottom:5px;  left:0px;  box-shadow:0 4px 8px #333;} .folder.open .front{ /*3D轉(zhuǎn)換50度 */  -moz-transform:rotateX(-50deg);  -webkit-transform:rotateX(-50deg);  transform:rotateX(-50deg);}  /*----------------------------  Draggable Icons-----------------------------*/ #main img{  position:absolute;  cursor:move;}

$(function() {   var folder = $("#main .folder"),  //文件夾    front = folder.find('.front'), //文件夾前面部分    img = $("#main img"), //容器main中的所有圖片    droppedCount = 0;  //記數(shù)器   img.draggable(); //使所有圖片可以拖拽   folder.droppable({ //droppable事件,即拖拽到文件夾時觸發(fā)的事件    drop : function(event, ui) {//釋放時觸發(fā)             // 移動拖拽的圖片      ui.draggable.remove();             // 給計數(shù)器加1      front.text(++droppedCount);           },         activate : function(){ //拖拽時讓文件夾打開             folder.addClass('open');    },         deactivate : function(){ //停止拖拽時讓文件夾關(guān)閉      folder.removeClass('open');    }  });});