diff options
Diffstat (limited to 'demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page')
-rwxr-xr-x | demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page new file mode 100755 index 00000000..89d64110 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/DragDrop/Home.page @@ -0,0 +1,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> |