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="~/Content/images/1.bmp" /> 18 <img src="~/Content/images/2.bmp" /> 19 <img src="~/Content/images/3.bmp" /> 20 <img src="~/Content/images/4.bmp" /> 21 </div> 22 <h2>购物车</h2> 23 <div id="shop"> 24 <img src="~/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>
时间: 2024-10-11 02:53:38