Zend FR

// Les vignettes dans le carrousel
<ul id="carrouselvideos" class='carrouselvideos connectedSortable ui-widget-content ui-state-default'>
<?php
    foreach ($this->videocarr as $vid)
    { /* @var $vid Model_DbTable_Video */
        ?><li class="ui-widget-content ui-corner-tr" data-id=<?php echo $vid["idvideo"]; ?>>
            <img class="cloudcarousel" src="<?php echo $vid[$i]["imagevideo"]; ?>"
            width="48px" alt="<?php echo $vid["intitule"]; ?>"
            title="<?php echo $vid["intitule"]; ?>" />
        </li>
<?php } ?>
</ul>

// Les vignettes hors du carrousel
<ul id="gallery" class='gallery connectedSortable ui-helper-reset ui-helper-clearfix'>
<?php
    foreach ($this->listeVideos as $vid)
    { /* @var $vid Model_DbTable_Video */
        ?><li class="ui-widget-content ui-corner-tr" data-id=<?php echo $vid["idvideo"]; ?>>
            <img class="cloudcarousel" src="<?php echo $vid["imagevideo"]; ?>"
            width="48px" alt="<?php echo $vid["intitule"]; ?>"
            title="<?php echo $vid["intitule"]; ?>" />
        </li>
<?php } ?>

// Si on veut récupérer le retour de l'action qui gère le contenu du carrousel
<div id="result"></div>

    public function init()
    {
        // Si requete ajax on désactive les layouts
        if($this->_request->isXmlHttpRequest()){
            $this->_helper->layout->disableLayout();    //disable layout for ajax
        }
    }


 public function indexAction()
    {

        // On crée les instances des objets dont on va se servir
        $videomodel    = new Model_DbTable_Video();
        $carrouselvideos = new Model_DbTable_Carrousel();

        // On récupère les vidéos qui ne sont pas dans le carrousel :
        $this->view->listeVideos = $videomodel->getVideosHorsCarrousel();

        // On récupère la liste des vidéos qui doivent se trouver dans le carrousel
        $this->view->videocarr = $carrouselvideos->getVideos();


        // Ci-dessous : Javascript, source, ini et librairie
        
        // On active l'utilisation de la librairie jQuery
        $this->view->jQuery()->enable();
        $this->view->jQuery()->uiEnable();
        
        // La fonction de glisser-déposer
    //    $this->view->headScript()->appendFile($this->view->baseUrl().'/js/droppable.js');
        
                
        // Gestion du contenu du carrousel 3D
        $this->view->headScript('script','
        $(document).ready(function(){
            
        // Le conteneur des vignettes qui ne sont pas dans le carrousel
        $( "#gallery" ).sortable({
            connectWith: ".connectedSortable",
            cancel: "a.ui-icon",                    // cliquer sur une icône empêche le déplacement
            revert: "invalid",                        // Si relaché, l_objet retourne à sa position initiale
            helper: "clone",
            cursor: "move"
        });

        // Le conteneur des vignettes qui sont dans le carrousel
        $( "#carrouselvideos" ).sortable({
            connectWith: ".connectedSortable",
            cancel: "a.ui-icon",                    // cliquer sur une icône empêche le déplacement
            revert: "invalid",                        // Si relaché, l_objet retourne à sa position initiale
            helper: "clone",
            cursor: "move",
            update: function( event, ui ) {            // lorsque le contenu du carrousel change
                actualisecarrousel( "#remplace");    // On appelle une fonction qui met la BD à jour
            }
        });

        // Actualisation du contenu du caroussel dans la BD en appelant l_action adéquate
        function actualisecarrousel( $item ) {
            var $enfants = $( "#carrouselvideos" ).children();
            var $idvideos = new Array();
            // On crée un tableau contenant les IDs des vidéos dans le carrousel
            $enfants.each(function(index) {
                $idvideos.push($(this).attr("data-id"));
            });
            url = "videos/carrouselremplace/";
            // On met dans le conteneur "result" le résultat de l_action appelée
            $("#result").load(url, { "idvideos" : $idvideos});
        }
        });
        ');
        
    }

    /**
     * Remplace toutes les vidéos dans le carrousel 3D
     * Cette action est appelée par un script JQuery après tout drag'n drop vers ou depuis le carrousel
     * Elle est aussi appelée lors de tout déplacement d'une vignette à l'intérieur du carrousel.
     */
    public function carrouselremplaceAction()
    {
        // Récupération des ID des vidéos dans le carrousel après le drag'n drop
        $idvideos        = $this->_getParam('idvideos', 0);

    //     Zend_Debug::dump($idvideos);
         
         $carrouselmodel = new Model_DbTable_Carrousel();
         
         // On vide le carrousel
         $carrouselmodel->vide();
         
         // On lui ajoute les vidéos dont les IDs sont passées en paramètre
         if ($idvideos) {
             foreach ($idvideos as $idvideo) {
                 $carrouselmodel->ajoute($idvideo);
             }
         }
    }