<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>