Agregar orden de arrastrar y soltar en el componente

Desarrollé un pequeño componente basado en el tutorial de Joomla Hello World, y ahora me gustaría implementar el mismo reordenamiento de arrastrar y soltar que muchos otros componentes de Joomla incluyen:

Al ordenar por la primera columna, es posible arrastrar cada fila de la tabla para cambiar la posición.

¿Existe una forma nativa de agregar esta funcionalidad en Joomla, o tengo que programarla yo mismo?

Cualquier empujón en la dirección correcta apreciado.

Hay algunos requisitos previos y debe realizar algunas modificaciones en su plantilla de vista. Pero no tiene que desarrollar esta función por su cuenta.

Prerrequisitos

• Necesita un orden de columnas de tipo INT para su tabla de base de datos
• Su vista de lista ya debe poder ordenarse (haciendo clic en los encabezados de columna de la tabla)

Modificaciones

Esta es la parte más importante para hacer que las filas de su tabla se puedan ordenar arrastrando y soltando:

JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);

Solo debe activar (es decir, ejecutar la línea anterior) si su tabla está ordenada por el orden de las columnas de la tabla de la base de datos . Debe averiguar por qué columna está ordenada su tabla y en qué dirección (ASC o DESC). Haga esto al comienzo de su default.php:

$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn  = $this->escape($this->state->get('list.direction'));

Compruebe si la tabla se ordena por la columna de pedidos

$saveOrder = $listOrder == 'a.ordering';

Haga que las filas de su tabla se puedan ordenar arrastrando y soltando si $ saveOrder es verdadero. Reemplace com_example con el nombre de su componente y "elementos" en task = items.saveOrderAjax con el nombre de su controlador de lista:

if ($saveOrder)
{
    $saveOrderingUrl = 'index.php?option=com_example&task=items.saveOrderAjax&tmpl=component';
    JHtml::_('sortablelist.sortable', 'itemList', 'adminForm', strtolower($listDirn), $saveOrderingUrl);
}

Se llamará $ saveOrderingUrl a través de AJAX cada vez que suelte un elemento. Si su controlador está extendiendo la clase correcta de Joomla MVC (JControllerAdmin), este método está automáticamente disponible para usted. itemList es el ID de su tabla HTML, y adminForm es el nombre (o ID, no estoy seguro) de su formulario HTML:

<form action="<?php echo JRoute::_('index.php?option=com_example&view=items'); ?>" method="post" name="adminForm" id="adminForm">
    ...
    <table class="table table-striped" id="itemList">
        ...
    </table>
    ...
</form>

Necesitará una nueva columna en su tabla HTML. En su captura de pantalla es la columna a la izquierda. El encabezado de la columna de la tabla se ve así:

<th width="1%" class="nowrap center hidden-phone">
    <?php echo JHtml::_('searchtools.sort', '', 'a.ordering', $listDirn, $listOrder, null, 'asc', 'JGRID_HEADING_ORDERING', 'icon-menu-2'); ?>
</th>

Para el cuerpo de su mesa, lo más probable es que tenga un bucle foreach pasando por todos los elementos de su lista. La primera celda en cada fila de su tabla HTML será ese ícono de arrastre. Si tiene la función de arrastrar y soltar deshabilitada (debido a que su tabla no está ordenada por pedido ), debe desactivar el ícono y hacer una sugerencia:

<tbody>
    <?php foreach ($this->items as $i => $item) :
        $ordering  = ($listOrder == 'ordering');
    ?>
    <tr class="row<?php echo $i % 2; ?>">
        <td class="order nowrap center hidden-phone">
        <?php
            $iconClass = '';
            if (!$saveOrder) {
                $iconClass = ' inactive tip-top hasTooltip" title="' . JHtml::tooltipText('JORDERINGDISABLED');
            }
         ?>
             <span class="sortable-handler <?php echo $iconClass ?>">
                 <span class="icon-menu"></span>
             </span>
             <?php if ($saveOrder) : ?>
             <input type="text" style="display:none" name="order[]" size="5" value="<?php echo $item->ordering; ?>" class="width-20 text-area-order " />
             <?php endif; ?>
        </td>
  ...
</tbody>