The Goal of this tutorial is to set up the necessary stuff to use the Ajax helper as described in the documentation http://manual.cakephp.org/pages/ch09s01#d0e1687 which include useful function for drag and drop
Installing the stuff
Download the package from scriptaculous http://script.aculo.us/downloads
Unpack it and copy all the file in lib and src directly in app/webroot/js
Now those libraries should be available from everywhere in your pages so edit (or create) app/view/layout/default.thtml and add the folowing code to the header
<?php print $javascript->link('prototype') ?> <?php print $javascript->link('scriptaculous') ?>
Let's code
create the controller app/controllers/scriptaculous_controller
<?php class ScriptaculousController extends AppController { var $helpers = array("Ajax","Html"); var $uses = array("Post"); function draggable(){ } }
I use the Post model because every controller expect a model but we don’t need one for this exemple so I use the Post Model frome the cake tutorial http://wiki.cakephp.org/tutorials:blog_tutorial_-_1
Create now the view app/view/scriptaculous/draggable.thtml and add the folowing code
<div id="dragme">I am draggable, test me !!!</div> <?php echo $ajax->drag("dragme"); ?>
That’s it !! visit now http://localhost/scriptaculous/draggable/ you can put the string “I am draggle, test me !!!” every where you want in the screen.
