Use jQuery to delete the recycle bin

Use jQuery to delete the recycle bin
JQuery is a very powerful Javascript script library. The reason why we developers like jQuery is not only its concise code, but also its rich jQuery plug-ins. Today, we use an example to illustrate how jQuery achieves drag and drop. Using jQuery to implement drag-and-drop operations is very simple. You can simply drag any element on a webpage using the drag-and-drop interface encapsulated in jQuery. Today, we will use this feature of jQuery to implement the function of dragging and dropping small desktop icons. Just like the recycle bin of the operating system, we only need to drag the application icon to the recycle bin to delete it, for details, see the DEMO below. You can also take a look at the DEMO below to briefly introduce the implementation of this jQuery Drag and Drop Method to delete small icons, mainly including HTML code, CSS3 code and jQuery code. HTML code: HTML code mainly defines the container of a recycle bin folder and the images of small icons. Copy the Code <div id = "main"> <div class = "folder"> <div class = "front"> </div> <div class = "back"> </ div> </div> </div> the structure of the copied code is relatively simple. Below is a simple CSS code. CSS code: copy the code. folder {/* This will enable the 3D effect. decrease this value * to make the perspective more pronounced: */-webkit-perspective: 800px;-moz-perspective: 800px; perspective: 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;/* Enabling 3d space for the tr Ansforms */-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d; transform-style: preserve-3d; /* Enabling a smooth animated transition */-webkit-transition: 0.5 s;-moz-transition: 0.5 s; transition: 0.5 s; /* Disable text seleltion on the folder */-webkit-user-select: none;-moz-user-select: none; position: absolute; top: 0; left: 50%; margin-left:-75px ;}. folder. Front {border-radius: 5px 5px 0 0;-moz-transform: rotateX (-30deg);-webkit-transform: rotateX (-30deg); transform: rotateX (-30deg);-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%); backgr Ound-image: linear-gradient (top, #93bad8 0%, #6c9dc0 85%, # 628faf 100%); box-shadow: 0-2px 2px rgba (0.1, 0, 0 ), 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%, #89 afcc 10%, #5985a5 60%); bac Kground-image:-moz-linear-gradient (top, #93bad8 0%, #89 afcc 10%, #5985a5 60%); background-image: linear-gradient (top, #93bad8 0%, #89 afcc 10%, #5985a5 60%); border-radius: 0 5px 0 0; box-shadow: 0-1px 1px rgba (, 0, 0, (0.15 );}. 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 rg Ba (0.15, 0, 0 );}. 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 {-moz-transform: rotateX (-50deg);-webkit-transform: rotateX (-50deg); transform: rotateX (-50deg );} /* ---------------------------- Draggable Icons ----------------------------- */# main img {position: absolute; cursor: move ;} According to the CSS definition above, the appearance of the recycle bin folder for deleting small icons is 3D, which depends on the 3D support of your browser. Finally, it is the most important jQuery code. We have implemented the mouse drag icon and put it into the recycle bin. Here we reference the jQuery UI script library, friends who are familiar with jQuery should be familiar with jQuery UI and will not go into details here. JQuery code: Copy code $ (function () {var folder = $ ("# main. folder "), front = folder. find ('. front '), img = $ ("# main img"), droppedCount = 0; img. draggable (); folder. droppable ({drop: function (event, ui) {// Remove the dragged icon ui. draggable. remove (); // update the counters front. text (++ droppedCount);}, activate: function () {// When the user starts draggin an icon folder. addClass ('open');}, deactivate: function () {// Close the folder. removeClass ('open ');}});});