Drag and Drop

Drag and drop the items into the shopping cart

PHP/HTML Source:
 * Web Store Drag & Drop example

require_once 'raxan/pdi/autostart.php';

class WebStorePage extends RaxanWebPage {

    protected function _init() {

    protected function  _load() {
        // listen to basket drops

        // make basket droppable - see the jQuery docs for droppable options

        // 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



Plugin Source:

HTML/JavaScript Source (views/dragdrop.html):
<!DOCTYPE html>

        <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 {

        <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 id="basket-items" class="pad" align="left"></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"/>



Data Source: