<?php
/**
* Web Store Drag & Drop example
*/
require_once 'raxan/pdi/autostart.php';
class WebStorePage extends RaxanWebPage {
protected function _init() {
$this->source('views/dragdrop.html');
}
protected function _load() {
// listen to basket drops
$this->basket->bind('#drop','.basketDrop');
// make basket droppable - see the jQuery docs for droppable options
$this->basket->droppable();
// make items draggable - see jQuery docs for draggable options
$this['.items img']->draggable(array('revert'=>'invalid'));
}
protected function basketDrop($e) {
// get ID from draggable
$id = $e->uiDraggable->getAttribute('id');
$id = intval(substr($id,3));
if ($id) {
$item = $this->findById('itm0'.$id);
$html = '<img src="'.$item->attr('src').
'" width="32" /> '.$item->attr('alt').'<br />';
// use the c() function to update items inside the browser
c('#itm0'.$id)->remove();
c('#basket-items')->append($html);
}
}
}
?><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Drag & Drop example</title>
<link href="../raxan/ui/css/master.css" type="text/css" rel="stylesheet" />
<!--[if lt IE 8]><link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
<link href="../raxan/ui/css/default/theme.css" type="text/css" rel="stylesheet" />
<style type="text/css">
#basket-items img {
vertical-align:middle
}
</style>
</head>
<body>
<div class="container e90">
<div class="rax-backdrop right c9 margin" align="center">
<div class="rax-content-pal">
<div id="basket" class="bmb" >
<img width="64" src="views/images/basket.gif" />
<p>Drop here</p>
</div>
<div id="basket-items" class="pad" align="left"></div>
</div>
</div>
<div class="items pad">
<img id="itm01" src="views/images/videocam.png" height="48" width="48" alt ="video Camera $7.50"/>
<img id="itm02" src="views/images/phone.png" height="48" width="48" alt ="Mobile Phone $20.50"/>
<img id="itm03" src="views/images/bag.png" height="48" width="48" alt ="Gift Bag $1.25"/>
<img id="itm04" src="views/images/present.png" height="48" width="48" alt ="Gift Box $1.50"/>
</div>
</div>
</body>
</html>