ejemplos - jquery sortable table
jQuery elementos de tabla arrastrables (6)
La funcionalidad draggable de jQuery no parece funcionar en las tablas (en FF3 o Safari). Es un poco difícil imaginar cómo funcionaría esto, así que no es realmente sorprendente que no funcione.
<html>
<style type=''text/css''>
div.table { display: table; }
div.row { display: table-row; }
div.cell { display: table-cell; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<script>
$(document).ready(function(){
$(".row").draggable();
});
</script>
<body>
<div class=''table''>
<div class=''row''>
<div class=''cell''>Foo</div>
<div class=''cell''>Bar</div>
</div>
<div class=''row''>
<div class=''cell''>Spam</div>
<div class=''cell''>Eggs</div>
</div>
</div>
<table>
<tr class''row''><td>Foo</td><td>Bar</td></tr>
<tr class=''row''><td>Spam</td><td>Eggs</td></tr>
</table>
</body>
</html>
Me preguntaba a) si hay alguna razón específica por la que esto no funciona (desde la perspectiva de la especificación w3c / HTML) yb) cuál es la forma correcta de conseguir filas de tabla arrastrables.
Me gustan las tablas reales debido al algoritmo de colapso de borde y altura de fila; cualquier alternativa que pueda hacer esas cosas funcionaría bien.
Si tiene datos verdaderamente tabulares, debe seguir con la tabla de hecho.
Y si desea arrastrar filas dentro de una tabla, esta biblioteca JQuery + "tabla de filas arrastrables" funciona perfectamente en FireFox3
Hay una manera de hacer que las filas de la tabla sean arrastrables con JQuery UI también. Todo lo que necesita hacer es establecer la opción de ayuda a una función que devuelve un nuevo div con una tabla dentro que albergará la fila que está arrastrando de la siguiente manera:
helper: function(event){
return $(''<div class="drag-cart-item"><table></table></div>'').find(''table'').append($(event.target).closest(''tr'').clone()).end();
},
Gracias a David Petersen por el consejo: http://blog.petersendidit.com/post/drag-table-row-to-a-div-with-jquery/
También se puede establecer css tr.ui-draggable-dragging {display: block} - de esta forma se pueden arrastrar las filas, sin embargo, sus coordenadas están mal calculadas. No he encontrado una buena solución para este problema todavía.
Solo en caso de que alguien cometa el mismo error que yo hice:
Si desea reordenar TRs dentro de una tabla arrastrándolos, lo ordenable es lo que necesita en lugar de .draggable
¿Solo yo?
Esto es un poco tarde, pero hoy he encontrado que html5 drag''n drop API funciona bien con el elemento <tr> . Todo lo que necesita hacer es habilitarlo <tr draggable="true"> y registrar los eventos
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
Encontré este artículo muy útil http://www.html5rocks.com/en/tutorials/dnd/basics/
Tenga en cuenta que hay un error en esta API html5 que activará el evento cuando desplace el mouse sobre los elementos secundarios aunque solo esté interesado en el elemento primario. Espero que la gente de html5rocks lo arregle pronto.
Hice este trabajo usando JqueryUI con lo siguiente:
$(function() {
$(".sortable").sortable({
revert: true
});
});
table td {
border: solid 1px black;
}
table {
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
<tbody class="sortable">
<tr>
<td>1</td>
<td>One</td>
<td>some text</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
<td>some text</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
<td>some text</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
<td>some text</td>
</tr>
<tr>
<td>5</td>
<td>Five</td>
<td>some text</td>
</tr>
<tr>
<td>6</td>
<td>Six</td>
<td>some text</td>
</tr>
</tbody>
</table>