Блог

Главная - Вопросы по программированию - Сортируемый HTML с большим количеством ячеек в одной строке?

Сортируемый HTML с большим количеством ячеек в одной строке?

#html #html-table #row #jquery-ui-sortable #jquery-ui-draggable

#HTML #html-таблица #строка #jquery-ui-сортируемый #jquery-ui-перетаскиваемый

Вопрос:

Я хотел бы знать, как я могу перетаскивать и перемещать строку с большим количеством ячеек? Перетаскивание работает, но когда я отпускаю мышь, это не вставляется, просто возвращается в исходное положение.

Я прикрепил два изображения с результатами: введите описание изображения здесь

Эти коды являются частью большого проекта PHP.

     echo '<form id="formName" action="" method="post" enctype="multipart/form-data">
<table class="draganddrop" width="980" cellspacing="20" table style="font-family:arial; font-size:20px;";>
<tr>
<td width="20" valign="top"><input type="image" formaction="print-delete.php?id='.$row['id'].'" width="20" height="20" src="/megrendelesek/images/print.svg"></td>
<td style="font-weight:bold; color: '.${'tablerow'.$row['id']}.'" width="105" valign="top" align="center" >'.$row["atveheto"].'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="120" valign="top" >'.$row["megrendelo"].'</td>
<td style="font-weight:bold; color: '.${'tablerow'.$row['id']}.'" width="90" valign="top" >'.$row["cleanrovidnevek"].'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="30" valign="top" align="center">'.$row["db"].'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="40" valign="top" align="center" >'.$checksum.'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="100" valign="top">'.$row["uzenet"].'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="100" valign="top">'.$row["telepules"].'</td>
<td style="color: '.${'tablerow'.$row['id']}.'" width="80" valign="top" align="right">'.$row["vegosszeg"]. " Ft".'</td>
<td width="0"><input type="hidden" name="id" value="'.$row['id'].'" /></td>
<td width="40" valign="top"><input type="image" formaction="delete.php?id='.$row['id'].'" width="20" height="20" src="/megrendelesek/images/trash.svg"></td>
</tr>
</table>
</form>
';


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>


<script type="text/javascript">
           $('.draganddrop').sortable({
          });

</script>

При этом я могу изменить столбцы, но мне это не нужно, я бы хотел изменить строки:

 $(".draganddrop").children('tbody')
    .children('tr').sortable({
    });

Любая идея была бы полезна.
Спасибо.

Комментарии:

1. Еще одна вещь: все строки являются новыми таблицами, я думаю, что таким образом я не могу изменять строки. Как я могу выполнить сортировку в нескольких таблицах? Я пробовал с div, но безуспешно.

Ответ №1:

Я нашел решение:

 <div class="wrapper"> 
...//Different tables that generate PHP
</div>

<script type="text/javascript">
     $('.wrapper').sortable({
    connectWith: $('.wrapper')
    });
</script>
Метки: