jQueryUI có thể sắp xếp trên các hàng của bảng co lại chúng khi đang bị kéo

Question

Vấn đề về các hàng trong bảng này co lại trong khi kéo vào chức năng có thể sắp xếp khiến tôi khó khăn trong một thời gian dài. Bất cứ câu trả lời nào? (Q & A)

P.S. để có thể sắp xếp hoạt động ở tất cả các bảng, bạn PHẢI sử dụng TBODY xung quanh các hàng trong bảng mà bạn muốn sắp xếp và sau đó gọi hàm có thể sắp xếp trên TBOD chứa.

Answer 1

Tất cả những gì bạn cần làm là cung cấp độ rộng pixel cụ thể cho các ô trong bảng. Làm thế nào chúng ta có thể làm điều đó mà không biết nội dung của các tế bào bảng? đơn giản:

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

Answer 2

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

Answer 3

Không ai trong số các giải pháp được cung cấp làm việc cho tôi.

Trong trường hợp của tôi, chiều cao và chiều rộng được tính toán có thể sắp xếp của jQuery, được làm tròn xuống và ghi đè các thứ nguyên được tính tự động thông qua thuộc tính kiểu.

Đây là những gì tôi đã làm để khắc phục sự cố, mà tôi thấy thanh lịch hơn hầu hết các giải pháp được cung cấp. (mặc dù nó có !important s trong đó.)

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

Answer 4

Tôi tình cờ gặp một giải pháp trực tuyến.

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

Fix sortable tr from shrinking

Answer 5

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>