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.

 
tutorials/creating_a_dragglable_element.txt · Last modified: 2006/04/12 00:59 by michael