jQuery ermöglicht die Löschfunktion per Drag & Drop in den Papierkorb

Dieses Mal zeige ich Ihnen die Funktion zum Ziehen und Ablegen in den Papierkorb und zum Löschen mit jQuery. Was sind die Vorsichtsmaßnahmen für die Verwendung von jQuery, um die Funktion zum Ziehen und Ablegen in den Papierkorb zu erstellen? und das Folgende ist ein praktischer Fall.

Rendering ausführen:

Kerndateien vorstellen
Hier müssen Sie JQuery, JQuery UI und JQuery UI CSS einführen

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

<p id="main">
 <p class="folder">
  <p class="front"></p>
  <p class="back"></p>
 </p>
  <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" /> 
</p>

Kern-CSS-Stil
Freunde, die keine CSS3-Grundlage haben, verstehen bitte zuerst CSS3, andernfalls das folgende CSS wird schwierig sein

/*----------------------------
  CSS3文件夹
-----------------------------*/
.folder {
  /* This will enable the 3D effect. Decrease this value 
   * to make the perspective more pronounced: */
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 160px;
  height: 120px;
  margin: -100px 0 0 -60px;
.folder p{
  width:150px;
  height:115px;
  background-color:#93bad8;
  /* 3D变化保留元素的位置 */
  -webkit-transform-style: preserve-3d;
  -moz-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; 
  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;
}

Schreiben Sie an 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');
    }
  });
});

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jquery+php realisiert einen dynamischen digitalen Anzeigeeffekt

jQuery-Animationseffekt-Bildkarussell-Implementierung (im Anhang) Code)

Das obige ist der detaillierte Inhalt vonjQuery ermöglicht die Löschfunktion per Drag & Drop in den Papierkorb. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!