這篇文章主要介紹了基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能，實(shí)現(xiàn)非常簡(jiǎn)單，我們直接可以利用jQuery內(nèi)部封裝的拖拽接口即可簡(jiǎn)單實(shí)現(xiàn)在網(wǎng)頁上拖拽任意元素的功能，感興趣的小伙伴們可以參考一下

本文利用jQuery實(shí)現(xiàn)一個(gè)拖拽刪除桌面小圖標(biāo)的功能，使用起來就像操作系統(tǒng)的回收站一樣，我們只需要拖動(dòng)應(yīng)用圖標(biāo)至垃圾箱即可刪除這個(gè)圖標(biāo)，分享給大家，具體實(shí)現(xiàn)方法如下

運(yùn)行效果圖：

引入核心文件
這里需要引入jquery，jquery ui，與jquery ui css

<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>

構(gòu)建html

<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>

核心CSS樣式
沒有CSS3基礎(chǔ)的朋友，請(qǐng)先了解下CSS3，要不下面的CSS會(huì)吃力

/*----------------------------
  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;
   
  /*平滑的動(dòng)畫過渡 */
  -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;
}

寫入JS

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

源碼下載：jQuery實(shí)現(xiàn)可拖拽刪除小圖標(biāo)回收站功能

以上就是實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能的教程，感謝親們的耐心閱讀，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: