Ahora estoy pasando una "funcionalidad" que depende de drag&drop y me he quedado un poco pillado.
El tema es el siguiente:
Partiendo de este código
Código HTML :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#tabla_menus{
border:1px white dotted;
margin:5px; padding:5px;
width: 546px;
background-color:rgba(255,255,255,0.8);
}
tr.cabecera_menu2{
background-color:rgba(0,0,0,0.8);
}
tr.cabecera_menu {
background-color:rgba(255,255,255,0.2);
padding:2px;
color:darkblue;
font-weight:bold; font-size:16px !important;
text-align:center;
}
#tabla_menus { list-style-type: none; margin: 0; padding: 0; }
#tabla_menus div {width: 545px; }
</style>
<script>
$(function() {
$( "#tabla_menus" ).sortable();
$( "#tabla_menus" ).disableSelection();
});
</script>
<body>
<div id="tabla_menus">
<table class="tabla_menu" id="tabla_30472">
<tr class="cabecera_menu2">
<td colspan="3"><input type="hidden" name="menu_items[]" />Mover Tabla</td>
</tr>
<tr class="cabecera_menu">
<td class="cabecera_menu">Texto</td>
<td class="cabecera_menu">Enlace</td>
<td ></td>
</tr>
<tr id="fila_20129" class="well">
<td><input type="text" name="menu_txt[]" value="Presentación" /> </td>
<td><input type="text" name="menu_enlace[]" value="pres" /></td>
<td >mover Fila</td>
</tr>
</table>
<table class="tabla_menu" id="tabla_14534">
<tr class="cabecera_menu2">
<td colspan="3"><input type="hidden" name="menu_items[]" />Mover Tabla</td>
</tr>
<tr class="cabecera_menu">
<td class="cabecera_menu">Texto</td>
<td class="cabecera_menu">Enlace</td>
<td colspan="3"></td>
</tr>
<tr id="fila_12423" class="well">
<td><input type="text" name="menu_txt[]" value="Nosotros" /></td>
<td><input type="text" name="menu_enlace[]" value="nos" /></td>
<td >mover Fila</td>
</tr>
<tr id="fila_31668" class="well">
<td><input type="text" name="menu_txt[]" value="Quienes somos" /></td>
<td><input type="text" name="menu_enlace[]" value="" /></td>
<td >mover Fila</td>
</tr>
</table>
</div> he conseguido poder reorganzar las tablas, pero ahora lo que me gustaría es poder reorganizar las filas dentro de las tablas.
Para eso he probado con estas funciones
$(function() {
$( '[id^=tabla_]' ).sortable();
$( '[id^=tabla_]' ).disableSelection();
});
$(function() {
$( ".well" ).sortable();
$( ".well" ).disableSelection();
});
pero no lo consigo, lo máximo que he logrado, ha sido reordenar el contenido dentro de una misma fila.
Tambien quiero que la primera fila con datos, tenga un formato diferente, para eso he probado en css
con first-child, pero no me ha funcionado, esto no me es importante pero me picó la curiosidad.
Creo que para esto, debo poder controlar cuando se ha cambiado una fila, pero no se donde debo hacerlo.
Podríais ayudarme, o guiarme ?
Gracias
