Drag and Resize

Drag the yellow box to update the X and Y coordinates

PHP/HTML Source:

require_once 'raxan/pdi/autostart.php'; 

class DragResizePage extends RaxanWebPage {

    protected function _load() {
        $this->loadCSS('master');  // load master css
        $this->loadTheme('default');  // load default theme
        $this->dragme->draggable(); // make element draggable
        $this->resizeme->resizable(); // make element resizable

    protected function dragStop($e) {
        $x = (int)$e->targetX;
        $y = (int)$e->targetY;
        $this->msg->text('Moved to X:'.$x.' Y:'.$y);
        // update box color on client
            'background' => '#'.$this->randomColor(),
            'border-color' => '#'.$this->randomColor()

    // generate random hex color
    protected function randomColor() {
        return dechex(rand(10, 254)).dechex(rand(10, 254)).dechex(rand(10, 254));


<div class="container pad">
    <div id="msg" class="rax-box info c7 bmm" xt-autoupdate>X: Y:</div>
    <div id="dragme" class="rax-box alert c3 r2" xt-bind="#dragstop,dragStop">
        Drag Me

    <div id="resizeme" class="rax-box success c3 r2 prepend-top" xt-bind="#dragstop,dragStop">
        Resize Me

Plugin Source:

HTML/JavaScript Source:

Data Source: