JQueryUI sortable thead и tbody сжимаются при перетаскивании строки с двумя скрытыми полями

У меня есть таблица с разными строками и полями. В одной строке у меня есть два поля с display:none;, и когда я делаю перетаскивание этих строк, есть эффект, подобный боковому отступу в <tbody> и <thead>, таблица не сжимается, элементы таблицы да.

В следующем JsFiddle в первой строке работает неправильно, но во второй строке, которая имеет только одно поле с display:none;, оно работает.

Если у вас есть вопросы, спросите его.

Пример ошибок

Таблица при перетаскивании:

Сначала я думал, что это можно решить, ища количество элементов <td> с классом .hidden-td (класс с display: none;) и искать элемент с классом .placeholder-style (это класс, который имеет <tr>, который генерируется при выполнении перетаскивания) и добавляет много <td>, как есть в <tr>, который я перемещаю, но не работает, не работает.

Я знаю, сколько полей имеет clase .hidden-td с этой строкой

var numcells = $('.hidden-td').length;

Проблема

У меня есть 9 элементов в первой строке, а в другой - 8. В моей функции start() я скрывал только один столбец в моем заполнителе, поэтому, когда я делаю перетаскивание первой строки, один столбец остается без применения class .hidden-td, и поэтому есть место в конце столбцов.

Как я могу это исправить?

https://jsfiddle.net/w52m5ggb/20/

Ответ 1

В течение последних нескольких дней я боролся с сортируемым плагином, я думаю, что необходимо сделать следующие изменения:

Добавьте вспомогательную функцию для создания правильных размеров на вспомогательном объекте (перетаскиваемый объект), чтобы иметь правильный размер.
В функции запуска добавьте элемент html в placeholder html, чтобы он оставался идентичным оригиналу.

код:

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
      $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

      //copy item html to placeholder html

      ui.placeholder.html(ui.item.html());

      //hide the items but keep the height/width. 
      ui.placeholder.css('visibility', 'hidden');
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },

    //add helper function to keep draggable object the same width
    helper: function(e, tr)
    {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
        // Set helper cell sizes to match the original sizes
        $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

Обновлена скрипка

Ответ 2

Когда создается placeholder, он принимает только число ячеек в строке и создает пустую строку с этими ячейками.

Вы добавляете класс hidden-td к n-му ребенку 2, поэтому вы скрываете одну ячейку. Это нормально для строк 2 и выше, но не для первой строки, так как у вас есть еще одна ячейка в этой строке. См. placeholder для строки 2:

<td colspan="1">&nbsp;</td><td colspan="1" class="hidden-td">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td>

Для первой строки:

<td colspan="1">&nbsp;</td><td colspan="1" class="hidden-td">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td>

Что вы можете сделать, это скрыть каждую ячейку в заполнителе и показать только нужный вам номер. Это можно сделать с помощью CSS, например:

.placeholder-style td {
  display: none;
}

.placeholder-style td:nth-child(-n+7) {
  display: table-cell;
}

Результат: https://jsfiddle.net/3g3bt80e/1/

Ответ 3

Вы можете попробовать этот подход в фрагменте ниже.

$("#tabs").tabs();

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
      ui.helper.css('display', 'table');
     // console.log(ui.placeholder.html())
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

img {
  width: 100px;
}
.hidden-td{
  display:none;
}
.table{
  background-color:green;
  border:0;
  width:100%;
}
.trdrag{
  background-color:yellow;
}
.trdrag.ui-sortable-handle td.tdslug, .trdrag.ui-sortable-handle td.tdslug img{
  text-align:center;
  align-items:center;
  display: table-cell;
  justify-content: center;
}
.trdrag.ui-sortable-handle td.tdslug{
  white-space:normal;
  word-wrap: break-word;
}
.trdrag.ui-sortable-handle td.tdslug img{
  padding-left:1rem;
}
.trdrag.ui-sortable-handle {
  text-align:center;
  align-items:center;
  display: table-row;
  justify-content: center;
  width:100%;
  margin-left: .3rem;
}
  
.thcenter{
  background-color:grey !important;
}
.ui-sortable-helper {
  left:0px!important;
}
.idrow{
  width:5%;
}
.tdvisible{
  width:5%;
}
.tdslug{
  width:10%;
}
.tdimg{
  width:15%;
}
.tdorder{
  width:20%;
}
.tdacciones{
  width:40%;
}

.placeholder-style td {
  display: none;
}

.placeholder-style td:nth-child(-n+7) {
  display: table-cell;
}

<link href="#" onclick="location.href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'; return false;" rel="stylesheet"/>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
        <div class="col-md-12">
            <div id="table1">
              <table class="table">
                <thead>
                  <tr>
                    <th class="thcenter">ID</th>
                    <th class="thcenter">Visible</th>
                    <th class="thcenter">Nombre</th>
                    <th class="thcenter">Header</th>
                    <th class="thcenter">Home</th>
                    <th class="thcenter">Orden</th>
                    <th class="thcenter"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
                  </tr>
                </thead>
                <tbody id="tbodyproject"> 
                    <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td  class="hidden-td" style="display:none;">Testing</td>
                      <td  class="hidden-td" style="display:none;">Testing2</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">2</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">3</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">1</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                     <tr id="id1" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">4</p></td>
                      <td style="display:none;">Testing</td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 1">Delete
                      </form>
                     </td>
                    </tr>
                    <tr id="id2" class="trdrag">
                      <td class="idrow tdcenter"><p id="margindata">5</p></td>
                      <td class="tdcenter tdvisible"> 
                        Yes
                      </td>
                      <td class="tdslug"><p id="margindata">Slug</p></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
                      <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
                      <td class="tdcenter tdorder"><p id="margindata">Order 2</p></td>
                      <td class="tdacciones">
                      <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">

                          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
                          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
                          <input type="hidden" name="_token" value="Token 2">Delete
                      </form>
                      </td>
                    </tr>
                </tbody>
              </table>
              <br><br>
            </div>
        </div>