Implement drag-and-drop icons to the Recycle Bin and delete features based on jquery _jquery

This article uses jquery to implement a drag-and-drop desktop small icon function, using the same as the operating system of the Recycle Bin, we just need to drag the application icon to the Trash can delete this icon, to share with you, the implementation of the following methods

Run Effect chart:

Introducing Core Files
Here you need to introduce the Jquery,jquery UI with the 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>

Building HTML

<div id= "main" > <div class= "folder" > <div class= "front" ></div> <div class= "Back" ></ div> </div>           </div>
 

Core CSS Styles
No CSS3 based friends, please understand the next CSS3, or the following CSS will be difficult

/*----------------------------CSS3 folder-----------------------------/* * * This'll enable the 3D eff Ect.
  Decrease this value * to make the perspective more pronounced: * *-webkit-perspective:800px;
  -moz-perspective:800px; perspective:800px;
  /* Lens distance 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 Change the location of the elements * *-WEBKIT-TRANSFORM-STYLE:PRESERVE-3D;
  -moz-transform-style:preserve-3d;
   
  transform-style:preserve-3d;
  /* Smooth Animation transition * *-WEBKIT-TRANSITION:0.5S;
  -moz-transition:0.5s; 
   
  transition:0.5s;
   /* Prohibit the user to select elements */-webkit-user-select:none;
   -moz-user-select:none; 
   
  User-select:none;
  Position:absolute;
  top:0;
  left:50%;
margin-left:-75px;
  }. folder. front{/* Rounded corner, X axis 3D conversion 30 degrees/border-radius:5px 5px 0 0; -moz-transform:rotatex ( -30DEG);
  -webkit-transform:rotatex ( -30DEG);
   
   Transform:rotatex ( -30DEG);
  /* Defines the position of the X and y axes/*-moz-transform-origin:50% 100%;
  -webkit-transform-origin:50% 100%;
   
   transform-origin:50% 100%;
  /* Define Gradient effect * * 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%);
   
  /* Define Shadow */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{/* Define gradient effect/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%); /* Define rounded corners/border-radius:0
  5px 0 0;
/* Define Shadow */box-shadow:0 -1px 1px rgba (0,0,0,0.15);
  }/* Add content to back:before{. folder.
  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);
  }/* Add content to the. folder. back:after{contents: ';
  width:100%;
  height:4px;
  border-radius:5px;
  Position:absolute;
  bottom:5px;
  left:0px; box-shadow:0
4px 8px #333;
  Folder.open. front{/*3d Conversion of 50 degrees */-moz-transform:rotatex ( -50DEG);
  -webkit-transform:rotatex ( -50DEG);
Transform:rotatex ( -50DEG);
  }/*----------------------------draggable Icons-----------------------------/* #main img{Position:absolute;
Cursor:move; }

Write JS

$ (function () {
 
  var folder = $ ("#main. Folder"),  //folders
    front = Folder.find ('. Front '),//Folder front part
    img = $ (" #main img "),//All pictures in container main
    droppedcount = 0;  The Register
 
  img.draggable ()///Enables all pictures to be dragged
 
  folder.droppable ({//droppable event, the event that is triggered when dragging to a folder
    drop:function ( event, UI) {//Release trigger
       
      //Move drag Picture
      ui.draggable.remove ();
       
      Add 1
      front.text (++droppedcount) to the counter
       
    ,
     
    activate:function () {//Drag to open the folder
       
      Folder.addclass (' Open ');
     
    deactivate:function () {//Stop dragging when the folder is closed
      folder.removeclass (' open ');
}});

SOURCE Download:jquery Implementation can drag and drop Delete small icon Recycle Bin function

The above is to implement drag-and-drop icon to the Recycle Bin and delete the function of the tutorial, thanks to the patience of the parents to read, I hope that the learning of everyone help.