Drag an icon to the recycle bin and delete it based on jQuery.

Drag an icon to the recycle bin and delete it based on jQuery.

This article uses jQuery to implement the function of dragging and dropping the small desktop icon. It is used like the recycle bin of the operating system. We only need to drag the application icon to the recycle bin to delete the icon and share it with you, the specific implementation method is as follows:

Run:

Introduce core files
Here we need to introduce jquery, jquery ui, and 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>

Construct html

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

Core CSS style
If you do not have CSS3 basics, please first understand CSS3, or the following CSS will be difficult

/* ---------------------------- CSS3 folder -----------------------------*/. folder {/* This will enable the 3D effect. decrease this value * to make the perspective more pronounced: */-webkit-perspective: 800px;-moz-perspective: 800px; perspective: 800px;/* the lens is 800PX */position: absolute; top: 50%; left: 50%; z-index: 0; width: 160px; height: 120px; margin:-100px 0 0 0-60px ;}. folder div {width: 150px; height: 115px; background-color: #93bad8;/* 3D change retains the position of the element */-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;/* smooth animation transition */-webkit-transition: 0.5 s;-moz-transition: 0.5 s; transition: 0.5 s;/* prohibit the user from selecting elements */-webkit-user-select: none;-moz-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 0;-moz-transform: rotateX (-30deg);-webkit-transform: rotateX (-30deg); transform: rotateX (-30deg);/* defines the position on the X axis and Y axis */-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.1, 0, 255,255,255), 0 1px rgba (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%, #89 afcc 10%, #5985a5 60%); background-image: -moz-linear-gradient (top, #93bad8 0%, #89 afcc 10%, #5985a5 60%); background-image: linear-gradient (top, #93bad8 0%, #89 afcc 10%, #5985a5 60%);/* defines the rounded corner */border-radius: 0 5px 0 0;/* defines the shadow */box-shadow: 0-1px 1px rgba (0.15, 0,);}/* in. add content before 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.15, 0,);}/* in. add content */. 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 conversion 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 "), // folder front = folder. find ('. front '), // img =$ ("# main img") in front of the folder, // droppedCount = 0 for all images in the main of the container; // img. draggable (); // enables all images to be dragged to folder. droppable ({// droppable event, that is, the event drop: function (event, ui) triggered when the folder is dragged to {// The ui of the image is moved when the folder is released. draggable. remove (); // Add 1 front to the counter. text (++ droppedCount) ;}, activate: function () {// enable folder when dragging. addClass ('open') ;}, deactivate: function () {// disable folder when you stop dragging. removeClass ('open ');}});});

Download source code:JQuery allows you to drag and drop a small icon recycle bin.

The above is a tutorial on how to drag the icon to the recycle bin and delete it. Thank you for your patience and hope you can learn more.