jQueryUI 购物车拖放功能

 <style type="text/css">
 .basket{
 border:transparent solid 2px;
 }
 img{
 width:80px;
 height:80px;
 }
 .hover{
 border-color:red;
 }
 </style>

 <h2>商品</h2>
 <div id="b1" style="height:80px;width:100%;background-color:gainsboro;">

 <img src="~/Content/images/1.bmp" />
 <img src="~/Content/images/2.bmp" />
 <img src="~/Content/images/3.bmp" />
 <img src="~/Content/images/4.bmp" />
 </div>
 <h2>购物车</h2>
 <div id="shop">
 <img src="~/Content/images/cart.png" class="basket" width="" height=""/>
 </div>

 <script>

 $("#b1 img").draggable({
 revert: "invalid"
 });
 $("#shop img.basket").draggable({
 disabled:"true"
 })
 $("#shop img.basket").droppable({
 hoverClass: "hover",
 drop: function (e, ui) {
 $("#shop").append(ui.draggable);
 $(ui.draggable).css({
 position: "relative",
 top: "0px",
 left: "0px"
 }).addClass("bought");
 }
 });

 $("#b1").droppable({
 accept:".bought",
 drop: function (e, ui) {
 $("#b1").append(ui.draggable);
 $(ui.draggable).css({
 position: "relative",
 top: "0px",
 left: "0px"
 }).removeClass("bought");
 }
 });

 </script>