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>
|
本文转自 爱笑嘚蛋蛋 51CTO博客,原文链接:http://blog.51cto.com/dd118/1670195,如需转载请自行联系原作者