jQuery是一款非常強大的Javascript腳本庫，我們開發者喜歡jQuery的原因除了它代碼簡潔外，更多的是因為jQuery插件非常豐富。今天我們用一個示例來解說jQuery是如何實現拖拽的。

利用jQuery實現拖拽非常簡單，我們直接可以利用jQuery內部封裝的拖拽接口即可簡單實現在網頁上拖拽任意元素。今天我們就利用jQuery的這一特性來實現一個拖拽刪除桌面小圖標的功能，就像操作系統的回收站一樣，我們只需要拖動應用圖標至垃圾箱即可刪除這個圖標，具體可以看下面的DEMO演示。

?

大家也可以看DEMO演示

下面來簡單介紹一下實現這款jQuery拖拽刪除小圖標的方法流程，主要包括HTML代碼、CSS3代碼以及jQuery代碼。

HTML代碼：

HTML代碼主要定義了一個回收站文件夾的容器，以及各個小圖標的圖片。

<div id=”main”><div class=”folder”> <div class=”front”></div> <div class=”back”></div> </div>?<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” /></div>

代碼結構比較簡單，下面是簡單的CSS代碼。

CSS代碼：

.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 transforms */-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;/* Enabling a smooth animated transition */-webkit-transition:0.5s;-moz-transition:0.5s;transition:0.5s;/* Disable text seleltion on the folder */-webkit-user-select: none;-moz-user-select: none;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%);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); }.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); }.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; }

按照上面的CSS定義，刪除小圖標的回收站文件夾的外觀是3D的，這個要看你瀏覽器的3D支持情況。

最后是最重要的jQuery代碼，真正實現了鼠標拖拽圖標，并將其放入回收站，這里引用了jQuery UI的腳本庫，熟悉jQuery的朋友應該對jQuery UI不會陌生，這里不再贅述。

jQuery代碼：

$(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 iconui.draggable.remove();// update the countersfront.text(++droppedCount);},activate : function(){// When the user starts draggin an iconfolder.addClass('open');},deactivate : function(){// Close the folderfolder.removeClass('open');}}); });

通過上面的代碼，我們就實現了一個基于jQuery的小圖標刪除回收站效果，上面只是核心代碼，詳細代碼大家可以下載源代碼來研究。源代碼下載>>

轉載于:https://www.cnblogs.com/html5tricks/p/3890789.html

總結

以上是生活随笔為你收集整理的利用jQuery实现回收站删除效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。