若要模拟window系统的“回收站”功能，具体的要求如下：

• 对于列表中的图片，可以通过拖动或单击“删除”的链接，以动画的方式移至“回收站”。
• 对于“回收站的图片”，可以通过拖动和单击“还原”的链接，以动画的方式“还原”到图片列表。

 

最终效果：

 

 在图片列表中，本来当鼠标单击图片时，出现鼠标的移动样式，就可以直接将图片删除拖动到“回收站”，可是不知道为什么还原的实现了，删除的不行。。。。。。当然删除与还原都可以达到其效果。

 

 为了便于实现拖动和拖放的功能，需要引入jQuery UI插件中的js文件：

上面导入的js文件中，jquery-ui.js为jQuery UI的核心库，jquery-ui.css为核心样式文件

 

实现“回收站”，具体代码如下：

1   2   3       4         
        5   6   7   8 
        9  10  87  88  89 
      
        90   
        91   
       
         92     
        
 93       
java
 94       
          95        96       
          97       2006年 98       
          99       删除100       
         101     
102     
        
103       
java web
104        2008年 删除 
105     
        
106       
java web模块
107        2010年 删除 
108   
       
109   
       110   
       
        111       
        
回收站
112       113   
       
114   115 116 
      
117 118 

 

为了获取图片列表和回收站对象：

var $photo = $("#photo"); var $trash = $("#trash");

 

 

 

在$photo对象中查找<li>元素集，然后通过draggleable()方法设置获取的对象可以进行活动：

$("li", $photo).draggable({                revert: "invalid", // 在拖动过程中，停止时将返回原来位置                helper: "clone", //以复制的方式拖动                cursor: "move"            });

 

实现代码将图片拖入到‘回收站’，主要通过droppable()方法来实现，首先通过accept设置对象$trash的接收对象为‘#photo li’,然后通过drop设置图片拖动到‘回收站’时触发函数deleteImage();

$trash.droppable({                accept: "#photo li",                activeClass: "highlight",                drop: function(event, ui) {                    deleteImage(ui.draggable);                }            });

 

在这里的deleteImage()方法，主要实现将图片从图片列表里删除拖动到'回收站’。

//将回收站中的图片还原至相册            $photo.droppable({                accept: "#trash li",                activeClass: "active",                drop: function(event, ui) {                    recycleImage(ui.draggable);                }            });

 

 

实现将两个自定义的函数deleteImage（）和recycleImage（）绑定删除和还原事件:

//根据图片所在位置绑定删除或还原事件            $("ul.photo li").click(function(event) {                var $item = $(this),                $target = $(event.target);                if ($target.is("a.phtrash")) {                    deleteImage($item);                } else if ($target.is("a.phrefresh")) {                    recycleImage($item);                }                return false;            });