Mover categorías [Mejorado]

[Miguel92 525]

En este caso se usará CDN para que sea mejor

1 - En inc/class/c.admin.php buscamos

function saveOrden() { ... todo ... } 

y lo reemplazamos por

public function saveOrden() {
   global $tsCore;
   # 
   $ordenado = [];
   # Obtenemos lista con el nuevo orden
   $nuevo_orden = 1;
   foreach (explode(',', $_POST["cats"]) as $orden) {
      db_exec([__FILE__, __LINE__], 'query', "UPDATE p_categorias SET c_orden = ".$nuevo_orden." WHERE cid = ".$orden);
      array_push($ordenado, $nuevo_orden);
      $nuevo_orden++;
   }
} 

2 - En inc/php/ajax/ajax.admin.php buscan

'admin-badwords-delete' => array('n' => 4, 'p' => ''), 

y debajo agregan

'admin-ordenar-categorias' => array('n' => 4, 'p' => ''), 

más abajo buscan

case 'admin-badwords-delete':
    //<---
      echo $tsAdmin->deleteBadWord();
    //--->
break; 

y debajo agregan

case 'admin-ordenar-categorias':
    //<---
      echo $tsAdmin->saveOrden();
    //--->
break; 

3 - Luego en tema/templates/admin_mods/m.admin_cats.tpl y buscamos, puedes eliminar jquery.tablednd.js si quieres

<script type="text/javascript" src="{$tsConfig.js}/jquery.tablednd.js"></script>

y lo reemplazamos por, se usa la condicional ya que solo es donde se muestra la lista de categorías

{if $tsAct == ''}
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
{/if}

abajo de eso buscamos 

<script type="text/javascript">
    // {literal}
    $(function(){
        // {/literal} {if $tsAct == ''} {literal}
        $('#cats_orden').tableDnD({
            onDrop: function(table, row) {
                $.ajax({
                       type: 'post', 
                       url: global_data.url + '/admin/cats?ajax=true&ordenar=true', 
                       cache: false, 
                       data: $.tableDnD.serialize()
                });
            }
        });
        // {/literal} {/if} {literal}
        $('#cats_orden').tableDnD({
            onDrop: function(table, row) {
                $.ajax({
                       type: 'post', 
                       url: global_data.url + '/admin/cats?ajax=true&ordenar=true&t=cat', 
                       cache: false, 
                       data: $.tableDnD.serialize()
                });
            }
        });
        //
        $('#cat_img').change(function(){
            var cssi = $("#cat_img option:selected").css('background');
            $('#c_icon').css({"background" : cssi});
        });
        //
    });
    //{/literal}
</script>

y lo reemplazamos por

{if $tsAct == '' || $tsAct == 'editar' || $tsAct == 'nueva'}
<script>
$(() => {
   /* {if $tsAct == ''} */
   new Sortable(document.getElementById('cats_orden'), {
      animation: 150,
      dragClass: "arrastrar", // Clase que puedes modificar
      selectedClass: "seleccionado", // Clase que puedes modificar
      store: {
         // Guardar orden
         set: sortable => $.post(global_data.url + '/admin-ordenar-categorias.php', 'cats=' + sortable.toArray().join(','))
      }
   });
   /* {/if} */
   $('#cat_img').on('change', () => {
      $('#c_icon').css({ 
         "background": $("#cat_img option:selected").css('background') 
      })
   });
})
</script>
{/if}

más abajo buscan y le borran id="cats_orden" de

<table cellpadding="0" cellspacing="0" border="0" width="500" align="center" class="admin_table" id="cats_orden">

un poco más abajo buscan y le añaden id="cats_orden" a

<tbody>

abajo buscan

<tr id="{$c.cid}">

y lo reemplazan por

<tr id="{$c.cid}" data-id="{$c.cid}">

Si quieres puedes añadir estas líneas en tema/css/admin.css

.arrastrar {
    background-color: #EEE;
}
.seleccionado {
    background-color: #CCC;
}

Si quieres obtener más información sobre el complemento "SortableJS", puedes acceder a la página que contiene la documentación para que puedas hacer los cambios que desees!