Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery

Cet article utilise jQuery pour implémenter une fonction glisser-déposer pour supprimer les petites icônes du bureau. Cela fonctionne comme la corbeille du système d'exploitation. Il suffit de faire glisser l'icône de l'application vers la corbeille pour supprimer l'icône. . Partagez-le avec tout le monde et mettez-le en œuvre en détail. La méthode est la suivante

.

Opération de rendu :

Présentation des fichiers de base
Ici, vous devez introduire jquery, jquery ui et 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>

Construire du HTML

<div id="main">
 <div class="folder">
  <div class="front"></div>
  <div class="back"></div>
 </div>
  <img src="/static/imghw/default1.png"  data-src="assets/48px/calculator.png"  class="lazy"   style="max-width:90%" alt="Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/calculator.png"  class="lazy"   style="max-width:90%" alt="calculator" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/clipboard.png"  class="lazy"   style="max-width:90%" alt="clipboard" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/console.png"  class="lazy"   style="max-width:90%" alt="console" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/basketball.png"  class="lazy"   style="max-width:90%" alt="basketball" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/facebook.png"  class="lazy"   style="max-width:90%" alt="facebook" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/gift.png"  class="lazy"   style="max-width:90%" alt="gift" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/id_card.png"  class="lazy"   style="max-width:90%" alt="id card" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/imac.png"  class="lazy"   style="max-width:90%" alt="imac" /> 
  <img src="/static/imghw/default1.png"  data-src="assets/48px/system_monitoring.png"  class="lazy"   style="max-width:90%" alt="system monitoring" /> 
</div>

Styles CSS de base
Amis qui n'ont pas de fondation CSS3, veuillez d'abord comprendre CSS3, sinon le CSS suivant sera difficile

/*----------------------------
  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%);
   
   /*定义阴影 */
  Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery-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;
  /*定义阴影 */
  Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery-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;
  Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery-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;
  Implémentez le glissement des icônes vers la corbeille et leur suppression en fonction de jQuery_jquery-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;
}

Écrire en 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');
    }
  });
});

Téléchargement du code source : jQuery implémente la fonction de corbeille consistant à faire glisser et supprimer de petites icônes

Ce qui précède est un tutoriel pour implémenter la fonction de glisser des icônes vers la corbeille et de les supprimer. Merci pour votre patience lors de la lecture. J'espère que cela sera utile à l'apprentissage de chacun.