Queremos crear una galería de imágenes, muy bien !!!, pero además queremos que dicha galería permita mover las imágenes de una posición a otra. Trabajando con jQuery, este nos ofrece el jq_sortable_element(), de mi parte no logré que este me funcionara como viene documentado en el nuevo plugin sfJqueryReloadedPlugin, por lo que me dí la tarea de crear mi propio jq_sortable_element. El siguiente código lo agregar en tu jQueryHelper.php.

/**

 * Makes the elements matching the jQuery selector '$selector'
 * sortable by drag-and-drop and makes an AJAX call whenever
 * the sort order has changed. By default, the action called gets
 * the serialized sortable
 * element as parameters.
 *
 * Example:
 *
 '@order',
 *   )) ?>
 * Additional options can be passed in the $options associative array
 * and will be sent to jquery as parameters. For example:
 * 'handle' => 'span' specifies that span elements within the
 * sortable element are the element the user actually clicks on
 *  (although entire first-generation child elements of the
 * sortable element get reordered as a result).
 *
 * Added by hvallenilla@aberic.com
 * This Function has been modified by Henry Vallenilla
 */
function jq_sortable_element($selector, $options = array(),
$messenger = "response", $messageWait = "Wait...",
$messageSuccess = "Saved", $messageError = "Error")
{
	// Cargamos los js requeridos
        sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.widget.js');
        sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.mouse.js');
        sfContext::getInstance()->getResponse()->addJavascript
('/js/jq/jquery.ui.sortable.js');
	$options = _parse_attributes($options);
	$options['url'] = url_for($options['url']);
        $options['type'] = 'POST';
        $options = json_encode($options);
	$result = ‹‹‹EOM
       $(document).ready(
        function()
          {
            $('#$selector').sortable(
            {
              update: function(e, ui)
              {
                var serial = jQuery('#$selector').sortable('serialize'
, {});
                var options = $options;
                options['data'] = serial;
                //$.ajax(options);
                $(function(){
                    $.ajax({
                      type: "POST",
                      url: options["url"],
                      data: options["data"],
                      dataType: "script",
                      beforeSend: function(objeto){
                            $("#$messenger").html('$messageWait');
                            $("#$messenger").animate({
                                opacity: 100,
                              }, 1500 );
                      },
                      success: function(msg){
                            $("#$messenger").html('$messageSuccess');
                            $("#$messenger").animate({
				opacity: 0,
                            }, 1200 );
                      },
                      error: function(objeto){
                            $("#$messenger").html("$messageError");
                      }

                    });
                });
              }
            } );
          });
EOM;
        return javascript_tag($result);
}

Es requerido tener los archivos jquery.ui.widget.js, jquery.ui.mouse.js y jquery.ui.sortable.js.

El próximo paso es trabajar en nuestro modulo.

TemplateSuccess.php<?php if ($Posters->getNbResults()): ?>

<tr>

<td align=”center”>

<div style=”margin:0 auto; margin-left: 15px;” id=”image_poster” >

<?php foreach ($Posters as $Poster): ?>

<div id=”elemento_<?php echo $Poster->getIdPoster();?>” class=”contentPicture”>

<div class=”imagePoster”>

<?php if(is_file(sfConfig::get(’app_directory_poster’).’view_’.$Poster->getImage())):?>

<?php echo image_tag(’/uploads/posters/view_’.$Poster->getImage(),’ alt=”" title=”" class=”"  ’)  ?>

<?php else:?>

<?php echo image_tag(’no_image_available.gif’,'width=”200px” height=”180px” ‘)  ?>

<?php endif;?>

</div>

</div>

<?php endforeach; ?>

</div>

</td>

</tr>

<?php endif ?>

<!–  Colocar al final –>

<?php echo jq_sortable_element(’image_poster’, array(
‘url’ => ‘module/changePosition’,
‘only’ => ‘contentPicture’,
),
‘response’,
‘<div class=”load”>Arranging positions … </div><br />’,
‘<div class=”load”>Positions saved</div><br />’
) ?>

Css:

.contentPicture {
   float:left;
   width:210px;
   height:230px;
   margin: 3px;
   padding:6px;
   background-color:#f5f7f9;
   border-right: #b9cede solid 1px;
   border-bottom: #b9cede solid 1px;
   text-align:center;
   cursor: move;
}

.right-element{position: absolute;right: 0;width: 15%;text-align:
 right; /* depends on element width */}
.load{background-color: #7cb7e3;padding: 4px;color: #FFFFFF;}

Lo más probable que al ejecutar la acción, la estructura de su plantilla este descuadrada, ya queda de parte de cada quien acomodarlo a su manera, ya que quite muchas estilos personales de mi módulo para darle un toque sencillo y fácil de comprender.

action.class.php

public function executeChangePosition(sfWebRequest $request)
  {
    foreach ($request->getParameter('elemento') as $position => $id)
    {
        /** Update position **/
        $poster = PosterPeer::retrieveByPK($id);
        $poster->setPosition($position);
        $poster->save();
    }
  }

Al seguir todos estos pasos, podrá posicionar sus imágenes en el orden que desee. Es importante señalar que a la estructura de la tabla deben agregar un nuevo campo, Ej. POSITION, este será el que controle qué imagen es primera y cual es la última

Hasta ola próxima entrega. Saludos

Henry Vallenilla
Symfony Developer
Email/Gtalk: henryvallenilla@gmail.com
Skype: hvallenilla
Caracas - Venezuela
www.matatigre.com