這次帶給大家jQuery做出拖曳到回收站刪除功能，jQuery做出拖曳到回收站刪除功能的注意事項有哪些，下面就是實戰案例，一起來看一下。
運行效果圖：
#引入核心檔案
這裡需要引入jquery，jquery ui，與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>
登入後複製
建構html
<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>
登入後複製
核心CSS樣式
沒有CSS3基礎的朋友，請先了解下CSS3，要不下面的CSS會吃力
/*----------------------------
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;
}登入後複製
寫入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');
}
});
});登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jquery php實作動態數位顯示效果
#jQuery動畫效果圖片輪播實作（附程式碼）
以上是jQuery做出拖曳到回收站刪除功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
