1 <style type="text/css">
 2 .basket{
 3 border:transparent solid 2px;
 4 }
 5 img{
 6 width:80px;
 7 height:80px;
 8 }
 9 .hover{
10 border-color:red;
11 }
12 </style>
13 
14 <h2>商品</h2>
15 <div id="b1" style="height:80px;width:100%;background-color:gainsboro;">
16 
17 <img src=http://www.mamicode.com/"~/Content/images/1.bmp" />
18 <img src=http://www.mamicode.com/"~/Content/images/2.bmp" />
19 <img src=http://www.mamicode.com/"~/Content/images/3.bmp" />
20 <img src=http://www.mamicode.com/"~/Content/images/4.bmp" />
21 </div>
22 <h2>购物车</h2>
23 <div id="shop">
24 <img src=http://www.mamicode.com/"~/Content/images/cart.png" class="basket" width="80" height="80"/>
25 </div>
26 
27 <script>
28 
29 $("#b1 img").draggable({
30 revert: "invalid"
31 });
32 $("#shop img.basket").draggable({
33 disabled:"true"
34 })
35 $("#shop img.basket").droppable({
36 hoverClass: "hover",
37 drop: function (e, ui) { 
38 $("#shop").append(ui.draggable);
39 $(ui.draggable).css({
40 position: "relative",
41 top: "0px",
42 left: "0px"
43 }).addClass("bought");
44 }
45 });
46 
47 $("#b1").droppable({
48 accept:".bought",
49 drop: function (e, ui) {
50 $("#b1").append(ui.draggable);
51 $(ui.draggable).css({
52 position: "relative",
53 top: "0px",
54 left: "0px"
55 }).removeClass("bought");
56 }
57 });
58 
59 </script>