jQueryUI 購物車拖放功能

標籤：span   image   cti   idt   relative   parent   isp   ever   logs   

 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>

View Code

 

jQueryUI 購物車拖放功能