PRADO & DRAG AND DROP
http://www.xisc.com/forum/viewtopic.php?t=3013&highlight=drag
http://xlab6.com/prado/tests/index.php?page=ActiveControls:DragDropTest
http://xlab6.com/prado/tests/index.php?page=SourceView&source=ActiveControls:DragDropT
http://xlab6.com/prado/tests/index.php?page=SourceView&source=ActiveControls:DragDropTest
Source template :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Drag and Drop Test (AJAX) - A Simple Gallery</title>
<style type="text/css">
/*<![CDATA[*/
body
{
font-family: Georgia, "Times New Roman", Times, serif;
}
.w3c
{
margin-top: 2em;
display: block;
}
.item, .cart-item {
display: inline;
cursor:move;
}
.item, .cart-item
{
background-color: #F3F5F6;
border: 1px solid #C4CBD2;
float: left;
width: 100px;
margin: 2px;
}
.item img
{
width: 100px; height: 100px;
}
.cart-item img
{
width: 60px; height: 60px;
}
.cart-item
{
width: 60px;
background-color: #FFECEC;
border-color: #F7C3C3;
}
.cart, .trash
{
Height: 130px; border: 1px solid #ADFF2F;
background-color: #E9FFC8;
padding: 15px;
width: 600px;
}
.cart-hover
{
background-color: white;
}
.trash
{
height: 50px;
background-color: #E8EAFF;
border-color: Silver;
text-align: center;
margin-top: 2px;
color: #708090;
font-weight: bold;
font-size: 1.4em;
margin-bottom: 20px;
}
.trash-hover
{
background-color: #eee;
}
/*]]>*/
</style>
</head>
<body>
<h1>Drag and Drop Test (AJAX) - A Simple Gallery</h1>
<com:TForm>
<com:TRepeater ID="ProductList">
<prop:ItemTemplate>
<com:TDraggable CssClass="item">
<com:TImage ImageUrl="#'html/images/'.$this->Parent->Index"
AlternateText="#$this->Parent->Data"/>
</com:TDraggable>
</prop:ItemTemplate>
</com:TRepeater>
<div style="height:40px; border:1px solid white; clear:both;">
<p id="indicator" style="display:none">
<img src="html/images/indicator.gif" alt="Indicator" /> updating cart...
</p>
</div>
<com:TCallbackOptions
ID="Indicator"
onLoading="Element.show('indicator')"
onComplete="Element.hide('indicator')" />
<com:TDropContainer
ID="Cart"
CssClass="cart"
OnDrop="addItem"
AcceptCssClass="item"
HoverCssClass="cart-hover"
RequestOptions="Indicator"
ControlToUpdate="Cart">
Drop your favourite pictures into here.
<com:TRepeater
Visible="false"
ID="CartItems">
<prop:ItemTemplate>
<com:TDraggable CssClass="cart-item" Revert="False">
<com:TImage ImageUrl="#'html/images/'.$this->Parent->Data" />
</com:TDraggable>
</prop:ItemTemplate>
</com:TRepeater>
</com:TDropContainer>
<com:TDropContainer
ID="Trash"
CssClass="trash"
OnDrop="removeItem"
AcceptCssClass="cart-item"
RequestOptions="Indicator"
ControlToUpdate="Cart">Drag above items here.</com:TDropContainer>
</com:TForm>
<com:TJavascriptLogger />
<div class="w3c">
<a href="http://validator.w3.org/check?uri=referer">
Validate XHTML 1.0
</a>
<a href="?page=SourceView&source=<%= $this->Request->getRequestedPage() %>"
style="margin: 0 1em;"
onclick="window.open(this.href); return false;"
onkeypress="window.open(this.href); return false;">View Source</a>
</div>
</body>
</html>
Source classe :
<?php
class DragDropTest extends TCallbackPage
{
public function onLoad($param)
{
$data = include(dirname(FILE).'/imagelist.php');
$this->ProductList->setDataSource($data);
$this->ProductList->dataBind();
if(!$this->Session->has("cart"))
$this->Session->set("cart", array());
}
function addItem($sender, $id)
{
$item = $this->findObject($id);
$cart = $this->Session->get("cart");
$cart = $item->Parent->Index;
$this->populateCartItems($cart);
}
function removeItem($sender, $id)
{
$items = $this->Session->get("cart");
$this->CartItems->setDataSource($items);
$this->CartItems->dataBind();
$item = $this->findObject($id);
unset($items$item->Parent->Index);
$this->populateCartItems($items);
}
protected function populateCartItems($items)
{
$this->CartItems->setDataSource($items);
$this->CartItems->dataBind();
$this->Session->set("cart", $items);
$this->CallbackResponse->output = $this->CartItems->render();
}
}
?>
