ejemplos - jquery drag and drop list

jQueryUI ordenable en las filas de la tabla los encoge mientras se arrastra

Question

Este problema de las filas de tablas que se contraen mientras se arrastra en la función ordenable me causa problemas durante mucho tiempo. ¿Alguna respuesta? (Preguntas y respuestas)

PD: para poder trabajar en tablas, DEBE usar TBODY alrededor de las filas de la tabla que desea ordenar y luego llamar a la función ordenable en el TBODY que contiene.

Answer 1

Me encontré con una solución en línea.

var fixHelper = function(e, ui) {  
  ui.children().each(function() {  
    $(this).width($(this).width());  
  });  
  return ui;  
};
$(“#sort tbody”).sortable({  
 helper: fixHelper  
 }).disableSelection();

Arreglo arreglable tr de contracción

Answer 2

Ninguna de las soluciones ofrecidas funcionó para mí.

En mi caso, la altura y el ancho calculados de uQ sortable de jQuery se redondearon hacia abajo y anularon las dimensiones calculadas automáticamente a través del atributo de estilo.

Esto es lo que hice para solucionar el problema, que me pareció más elegante que la mayoría de las soluciones ofrecidas. (a pesar de que tiene !important s en él)

.ui-sortable-helper {
    width: auto !important;
    height: auto !important;
}

Answer 3

Todo lo que necesita hacer es dar un ancho de píxel específico a las celdas de la tabla. ¿Cómo podemos hacerlo sin conocer el contenido de las celdas de la tabla? sencillo:

$(document).ready(function(){
    $(''td'').each(function(){
        $(this).css(''width'', $(this).width() +''px'');
    });
});

Answer 4

src jquery-1.12.4.js

src jquery-ui.js

link rel jquery-ui.css

@model Servidor.CListados
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{
    <h2>Listados</h2>
    <h2>@ViewBag.Mensaje</h2>
    <table>
            <tr>
                <th>Campo1</th>
                <th>Campo2</th>
            </tr>
        <tbody id="sortable">
            @foreach (var item in Model.ListaTabla1)
            {
                <tr >
                    <td>@Html.DisplayFor(modelItem => item.Campo1)</td>
                    <td>@Html.DisplayFor(modelItem => item.Campo2)</td>
                </tr>
            }
        </tbody>
    </table>
    @*<ul id="sortable">
        @foreach (var item in Model.ListaTabla1)
        {
            <li>@Html.DisplayFor(modelItem => item.Campo1)</li>
        }
    </ul>*@
}
     <script>$("#sortable").sortable();</script>

Answer 5

.ui-sortable-helper {
    display: table;
}