blob: 89d64110b7da34e0b19b15579b51f4563581cec1 (
plain)
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<com:TContent id="body">
<style>
.cart {
border: 1px solid #E8A400;
background-color: white;
padding: 8px;
width: 500px;
height: 150px;
}
.cart-hover {
background-color: #E8A400;
}
.cart-items {
width: 30px;
height: 30px;
}
.products {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
.draggable {
cursor: move
}
.removable {
}
.trash {
width: 50px;
height: 50px;
border: 1px solid black;
}
.trash-hover {
background-image: url(<%~ assets/trash.png%>);
}
</style>
<h1>Drag & Drop demo !</h1>
<h2>Product List :</h2>
<div style="margin-bottom: 20px; height: 120px">
<com:TRepeater Id="ProductList" DataKeyField="ProductId">
<prop:ItemTemplate>
<com:TDraggable CssClass="products draggable" >
<com:TImage ImageUrl=<%#$this->Data['ProductImageUrl']%> />
</com:TDraggable>
</prop:ItemTemplate>
</com:TRepeater>
</div>
<h2>Your shopping cart :</h2>
<com:TDropContainer CssClass="cart" Id="cart"
AcceptCssClass="draggable"
HoverCssClass="cart-hover"
OnDrop="addItemToCart"
OnCallback="redrawCart"
>
<com:TRepeater id="ShoppingList" DataKeyField="ProductId">
<prop:EmptyTemplate>
Your shopping cart is empty, please add some items !
</prop:EmptyTemplate>
<prop:ItemTemplate>
<com:TDraggable CssClass="removable"
Revert="true"
Handle="<%=$this->itemImage->ClientId%>"
Ghosting=<%#($this->Data['ProductCount'] > 1)%>
>
<com:TImage id="itemImage" CssClass="cart-items" Style="cursor:move" ImageUrl=<%#$this->Data['ProductImageUrl']%>/>
<com:TLabel id="itemTitle" Text=<%#$this->Data['ProductTitle']%>/>
<com:TLabel id="itemCount" Text="(<%#$this->Data['ProductCount']%>)" />
</com:TDraggable>
</prop:ItemTemplate>
</com:TRepeater>
</com:TDropContainer>
<h2>Remove Items from cart by dropping them here</h2>
<com:TDropContainer CssClass="trash" id="trash"
AcceptCssClass="removable"
OnDrop="removeItemFromCart"
OnCallback="redrawCart"
HoverCssClass="trash-hover"
/>
</com:TContent>
|
