Creo que lo he logrado;
Sigueindo el hilo:
http://www.forosdelweb.com/f18/selec...-lista-908728/
agrege una linea a mi codigo : axis:'y',items:'tr',
y modique los il dentro del codigo jquery, quedando de esta forma:
tabla:
Código PHP:
<table width="200" border="1" id="lista">
<?php
while ($datos = mysqli_fetch_assoc($resultado)){
$elementos[$datos['IDElemento']] = $datos['Titulo'];
echo ' <tr id="elemento-'.$datos['IDElemento'].'"><td contenteditable="true">'.$datos['Titulo'].'</td>
<td> </td>
<td> </td> </tr>';
}
?>
</table>
y el query
Código HTML:
<script>
$(function(){
var formulario = $('#formulario'), ordenando = false, lista = $('#lista'),
elementos = lista.find('tr');
lista.sortable({
axis:'y',items:'tr',
update: function(event,tr){
var ordenPuntos = $(this).sortable('toArray').toString();
$.ajax({
type: 'POST',
url: 'ordenar/controlador.php',
dataType: 'json',
data: {
accion: 'ordenar',
puntos: ordenPuntos
}
});
}
});
lista.sortable('disable');
$('input[name="editar-ordenar"]').on('change', function(){
if ($(this).val() == 'ordenar'){
lista.sortable('enable');
elementos.attr('contenteditable',false);
ordenando = true;
}
else{
lista.sortable('disable');
elementos.attr('contenteditable',true);
ordenando = false;
}
});
formulario.on('submit',function(evento){ //Cuando el formulario se envía, vamos a insertar
evento.preventDefault();
var nombre = $('#campo-nombre').val();
$('#campo-nombre').val('');
$.ajax({
type: 'POST',
url: 'ordenar/controlador.php',
dataType: 'json',
data: {
accion: 'insertar',
nombre: nombre,
orden: elementos.length + 1 // El orden es el número de elementos + 1
},
success: function (devolver){
if (devolver.valor){
$('tr',{
id : 'elemento-' + devolver.valor,
'class': ordenando ? 'ordenable' : '',
text: nombre,
'contenteditable' : !ordenando
}).hide().appendTo($('#lista')).fadeIn('slow');
}
}
});
});
lista.on('keydown', 'tr', function(evento){
var punto = $(this);
var idPunto = punto.attr('id').split('-');
idPunto = idPunto[1];
switch(evento.keyCode){
case 27:{ //Escape
document.execCommand('undo');
punto.blur();
break;
}
case 46:{ //Suprimir
if (confirm('¿Seguro que quiere eliminar este elemento?')){
$.ajax({
type: 'POST',
data: {
accion: 'eliminar',
orden: punto.index(),
id: idPunto
},
url: 'ordenar/controlador.php',
success: function(e){
punto.fadeOut('slow').remove();
}
});
}
break;
}
case 13:{ //Enter
evento.preventDefault();
var texto = punto.text();
punto.blur();
$.ajax({
type: 'POST',
data: {
accion: 'editar',
id: idPunto,
nombre: texto
},
url: 'ordenar/controlador.php'
});
break;
}
}
});
});
</script>