1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
< body >
     < ul  class = "products" >
         < li >
             < a  href = "#"  class = "item" >
                 < img  src = "images/shirt1.gif" />
                 < div >
                     < p >Balloon</ p >
                     < p >Price:$25</ p >
                 </ div >
             </ a >
         </ li >
         < li >
             < a  href = "#"  class = "item" >
                 < img  src = "images/shirt2.gif" />
                 < div >
                     < p >Felling</ p >
                     < p >Price:$25</ p >
                 </ div >
             </ a >
         </ li >
         < li >
             < a  href = "#"  class = "item" >
                 < img  src = "images/shirt3.gif" />
                 < div >
                     < p >Balloon3</ p >
                     < p >Price:$25</ p >
                 </ div >
             </ a >
         </ li >
         < li >
             < a  href = "#"  class = "item" >
                 < img  src = "images/shirt4.gif" />
                 < div >
                     < p >Balloon4</ p >
                     < p >Price:$25</ p >
                 </ div >
             </ a >
         </ li >
     </ ul >
     
     < div  class = "cart" >
         < h1 >shopping cart</ h1 >
         < div  style = "background:#fff" >
             < table  id = "cartcontent"  fitColumns = "true"  style = "width:300px;height:auto;" >
                 < thead >
                 < tr >
                     < th  field = "name"  width = 140 >Name</ th >
                     < th  field = "quantity"  width = 60  align = "right" >Quantity</ th >
                     < th  field = "price"  width = 60  align = "right" >Price</ th >
                 </ tr >
             </ thead >
             </ table >
         </ div >
         < p  class = "total" >Total: $0</ p >
         < h2 >Drop here to add to cart</ h2 >
     </ div >
</ body >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<link rel= "stylesheet"  type= "text/css"  href= "easyui.css" >
<link rel= "stylesheet"  type= "text/css"  href= "icon.css" >
<style type= "text/css" >
     .products{
             list-style : none ;
             margin-right : 300px ;
             padding : 0px ;
             height : 100% ;
         }
         .products li{
             display : inline ;
             float : left ;
             margin : 10px ;
         }
         .item{
             display : block ;
             text-decoration : none ;
         }
         .item img{
             border : 1px  solid  #333 ;
         }
         .item p{
             margin : 0 ;
             font-weight : bold ;
             text-align : center ;
             color : #c3c3c3 ;
         }
         .cart{
             position : fixed ;
             right : 0 ;
             top : 0 ;
             width : 300px ;
             height : 100% ;
             background : #ccc ;
             padding : 0px  10px ;
         }
         h 1 {
             text-align : center ;
             color : #555 ;
         }
         h 2 {
             position : absolute ;
             font-size : 16px ;
             left : 10px ;
             bottom : 20px ;
             color : #555 ;
         }
         .total{
             margin : 0 ;
             text-align : right ;
             padding-right : 20px ;
         }
     
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script type= "text/javascript"  src= "jquery-1.11.2.js" ></script>
<script type= "text/javascript"  src= "jquery.easyui.min.js" ></script>
<script type= "text/javascript" >
     var  data = { "total" :0, "rows" :[]};
     var  totalCost = 0;
     
     $( function (){
         $( '#cartcontent' ).datagrid({
             singleSelect: true
         });
         $( '.item' ).draggable({
             revert: true ,
             proxy: 'clone' ,
             onStartDrag: function (){
                 $( this ).draggable( 'options' ).cursor =  'not-allowed' ;
                 $( this ).draggable( 'proxy' ).css( 'z-index' ,10);
             },
             onStopDrag: function (){
                 $( this ).draggable( 'options' ).cursor =  'move' ;
             }
         });
         $( '.cart' ).droppable({
             onDragEnter: function (e,source){
                 $(source).draggable( 'options' ).cursor =  'auto' ;
             },
             onDragLeave: function (e,source){
                 $(source).draggable( 'options' ).cursor =  'not-allowed' ;
             },
             onDrop: function (e,source){
                 var  name = $(source).find( 'p:eq(0)' ).html();
                 var  price = $(source).find( 'p:eq(1)' ).html();
                 addProduct(name,parseFloat(price.split( '$' )[1]));
             }
         });
     
     });
     function  addProduct(name,price){
         function  add(){
             for ( var  i = 0;i<data.total;i++){
                 var  row = data.rows[i];
                 if (row.name == name){
                 row.quantity += 1;
                 return ;
                 }
             }
             data.total += 1;
             data.rows.push({
                 name:name,
                 quantity:1,
                 price:price
             });
         }
         add();
         totalCost += price;
         $( '#cartcontent' ).datagrid( 'loadData' ,data);
         $( 'div.cart .total' ).html( 'Total:$' +totalCost);
     }
</script>