3-2 放置插件——droppable
本节编程练习不计算学习进度，请电脑登录imooc.com操作

放置插件——droppable

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：

$(selector).droppable({options})

selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

例如，在页面中，通过调用droppable插件将“产品区”中的元素拖曳至“购物车”中，同时改变“购物车”的背景色和数量值，如下图所示：

在浏览器中显示的效果：

从图中可以看出，先调用draggable插件任意拖曳“产品区”的元素，然后，调用droppable插件绑定“购物车”中接收元素，当“产品区”元素完全拖曳至“购物车”时，触发定义的drop函数，改变“购物车”中背景色和总数量值。

任务

我来试试，亲自将产品区中的元素拖曳至回收站中

在下列代码的第27、28、29行代码中，构建定义的drop函数代码，改变“回收站”元素的背景色和显示的内容。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>放置插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  7.         <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <div id="divtest">
  12.             <div class="box">
  13.                 <div class="title">产品区</div>
  14.                 <div class="drag"><div>苹果</div></div>
  15.             </div>
  16.             <div class="box">
  17.                 <div class="title">回收站</div>
  18.                 <div class="cart"><div id="tip">还没有产品</div></div>
  19.             </div>
  20.         </div>
  21.  
  22.         <script type="text/javascript">
  23.             $(function () {
  24.                 $(".drag").draggable();
  25.                 $(".cart").droppable({
  26.                     drop: function () {
  27.                             ?
  28.                             ?
  29.                             ?
  30.                     }
  31.                 })
  32.             });
  33.         </script>
  34.     </body>
  35. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }  
  5. .box
  6. {
  7.     width: 280px;
  8.     border: solid 1px #eee;
  9.     margin: 10px 0px;
  10. }
  11. .box .title
  12. {
  13.     padding: 8px;
  14.     background-color: Blue;
  15.     color: #fff;
  16.     height: 23px;
  17.     line-height: 23px;
  18.     font-size: 15px;
  19.     font-weight: bold;
  20. }
  21. .box .drag
  22. {
  23.     padding: 5px;
  24.     cursor: move;
  25. }
  26. .box .drag div
  27. {
  28.     border: solid 1px #fff;
  29.     background-color: red;
  30.     color:#fff;
  31.     cursor: move;
  32.     width: 35px;
  33.     padding: 20px;
  34.     text-align: center;
  35. }
  36. .box .cart
  37. {
  38.     padding: 5px;
  39.     cursor: move;
  40. }
  41. .box .cart div
  42. {
  43.     padding: 5px;
  44.     height: 55px;
  45.     text-align:center;
  46. }
  47. .focus
  48. {
  49.     background-color: #eee;
  50. }
下一节