用jQuery怎样做拖拽图标且删除的功能

本文利用jQuery实现一个拖拽删除桌面小图标的功能，使用起来就像操作系统的回收站一样，我们只需要拖动应用图标至垃圾箱即可删除这个图标，分享给大家，具体实现方法如下

运行效果图：

引入核心文件
这里需要引入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>
    

构建html

div id="main">
    
 div class="folder">
    
  div class="front">
    /div>
    
  div class="back">
    /div>
    
 /div>
    
  img src="assets/48px/box.png"  alt="box" />
     
  img src="assets/48px/calculator.png"  alt="calculator" />
     
  img src="assets/48px/clipboard.png"  alt="clipboard" />
     
  img src="assets/48px/console.png"  alt="console" />
     
  img src="assets/48px/basketball.png"  alt="basketball" />
     
  img src="assets/48px/facebook.png"  alt="facebook" />
     
  img src="assets/48px/gift.png"  alt="gift" />
     
  img src="assets/48px/id_card.png"  alt="id card" />
     
  img src="assets/48px/imac.png"  alt="imac" />
     
  img src="assets/48px/system_monitoring.png"  alt="system monitoring" />
     
/div>

核心CSS样式
没有CSS3基础的朋友，请先了解下CSS3，要不下面的CSS会吃力

/*----------------------------
  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转换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前加上内容 */
.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后加上内容 */
.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转换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;
      //记数器
 
  img.draggable();
 //使所有图片可以拖拽
 
  folder.droppable({
 //droppable事件,即拖拽到文件夹时触发的事件
    drop : function(event, ui) {
    //释放时触发
       
      // 移动拖拽的图片
      ui.draggable.remove();
    
       
      // 给计数器加1
      front.text(++droppedCount);

       
    }
,
     
    activate : function(){
     //拖拽时让文件夹打开
       
      folder.addClass('open');

    }
,
     
    deactivate : function(){
     //停止拖拽时让文件夹关闭
      folder.removeClass('open');

    }

  }
    );

}
    );
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！