Drag and Drop

Drag and drop the items into the shopping cart

<?php

/**
 * Shopping Cart example showing how to generate a web page using the RaxanWebPage class
 * Note: This example makes a direct call to gateway.php instad of autostart.php
 */

require_once 'raxan/pdi/gateway.php';

$page = new RaxanWebPage();
$page->appendView('dragdrop.html');

$page->loadCSS('master');
// load jquery files from the plugins folder
$page->loadScript('jquery');
$page->loadScript('jquery-ui-interactions');

// listen to basket drops
$page['#basket']->bind('#drop',array(
    'callback'=>'basket_drop'
));
function basket_drop($e) {
    // get ID from draggable
    $id = $e->uiDraggable->getAttribute('id');
    $id = intval(substr($id,3));
    if ($id) {
        $item = P('#itm0'.$id);
        $html = '<img src="'.$item->attr('src').'" width="32" /> '
                .$item->attr('alt').'<br />';
        C('#basket-items')->append($html);
        C('#itm0'.$id)->remove();
    }

}

// use the CLX to make the items draggable.
// for more information on draggables and droppables. See the jQuery documentation
C('.items img')->draggable(array('revert'=>'invalid'));
C('#basket')->droppable();

$page->reply();

?>

<style type="text/css">
    #basket-items img {vertical-align:middle}
</style>

<div class="right c9 margin" align="center">
    Drop here<br />
    <img id="basket" width="64" src="views/images/basket.gif" />
    <div id="basket-items" class="tpb pad" align="left"></div>
</div>
<div class="items pad">
    <img id="itm01" src="views/images/videocam.png" height="48" width="48" alt ="video Camera $7.50"/>&nbsp;
    <img id="itm02" src="views/images/phone.png" height="48" width="48" alt ="Mobile Phone $20.50"/><br />
    <img id="itm03" src="views/images/bag.png" height="48" width="48" alt ="Gift Bag $1.25"/><br />
    <img id="itm04" src="views/images/present.png" height="48" width="48" alt ="Gift Box $1.50"/>
</div>