16-从购物车中移除图书

10.6.3　从购物车中移除图书

购物车中的图书目前还并不能被移除。我们再来修改一下代码，使用户可以从购物车中移除图书。当图书从购物车中被移除后，它们又重新回到待售图书的列表中。要实现这些，我们在包含待售图书列表的 <div> 标签（ div#books ）上来管理已购买的图书的放置：

<script src = jquery.js></script> 
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> 
<link rel=stylesheet type=text/css 
　　　 href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> 
<style type=text/css> 
　.basket { 
　　border : transparent solid 2px; 
　} 
　.hover { 
　　border-color : red; 
　} 
</style> 
<h2> Drag your books in the cart! </h2> 
<div id=books> 
　<img src=images/j2ee.jpg height=80 /> 
　<img src=images/rails.jpg height=80 /> 
　<img src=images/javascript.jpg height=80 /> 
　<img src=images/html.jpg height=80 /> 
</div> 
<hr /> 
<h2> Cart: </h2> 
<div id=shopping> 
　<img src=images/basket.jpg class=basket /> 
</div> 
<script> 
$("div#books img").draggable ({ 
　 revert : "invalid" 
}); 
$("div#shopping img.basket").droppable ({ 
　hoverClass : "hover", 
　drop : function (event, ui) 
　{ 
　　$("div#shopping").append (ui.draggable); 
　　$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }) 
　　　　　　　　　 　 .addClass ("bought"); 
　} 
}); 
$("div#books").droppable ({ 
　accept : ".bought", 
　drop : function (event, ui) 
　{ 
　　$("div#books").append (ui.draggable); 
　　$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }) 
　　　　　　　　　　　.removeClass ("bought"); 
　} 
}); 
</script> 

每一本被放入购物车的图书现在都被赋予了名为 "bought" 的CSS类。 div#books 标签只会接纳拥有这个类名的图书（由于 accept 被设置为了 ".bought" ）。在这个图书列表上使用的 drop () 方法和购物车中使用的类似，只是因为此时图书已经不在购物车中了，所以它还需要移除 "bought" 的CSS类名。

①　官方文档中说明要使用此选项， options.helper 最好设置为 "clone" 。——译者注

②　官方文档中， snap 指的是被拖动的元素自动附着在其他元素边缘的特性，与此处描述有一些出入。——译者注

③　官方文档提到 false 值的作用是，在保管元素过多时避免大量添加CSS类可能造成的性能问题。——译者注

④　原书这里只有 draggable 、 helper 、 offset 3个属性，而官方文档中有4个属性。表10-14的内容译者也做了相应的补充。——译者注