summaryrefslogtreecommitdiff
path: root/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page
blob: a826f5a8ff2558ad90e5d44d6e1f8e0fc0735455 (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(<%~ images/trash.png%>);
}

</style>
<h1>Drag &amp; 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>