jQuery UI Sortableのドラッグ中、レイアウトが崩れる
Discussion
Closed
解決したいこと
テーブルのtrをドラッグ中、ドラッグ箇所以外横幅がtableごと縮小するのを解消したい。
環境
MacOS 12.1
fireFox 95.0.2
jquery-3.6.0.min.js
jquery-ui.min.js
Sortable.min.js"
html
<div>
<div class="bg-white">
<span><br /></span>
</div>
<div class="table-responsive">
<table id="dataTable" class="table table-hover table_sticky">
<thead>
<tr class="thColor">
<th scope="col" class="border-0" style="width:5%">#</th>
<th scope="col" class="border-0" style="width:32%">場所</th>
<th scope="col" class="border-0" style="width:30%">内容</th>
<th scope="col" class="border-0" style="width:10%">予想時間</th>
<th scope="col" class="border-0 text-center" style="width:10%">編集</th>
<th scope="col" class="border-0 text-center" style="width:10%">削除</th>
<th scope="col" class="border-0 text-center add" style="width:5%"><i class="fas fa-plus-circle"></i></th>
</tr>
</thead>
<tbody id="sortTable">
<tr class="bg-white shadow rounded d-none">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">新規データ</td>
<td data-name="tenkenNaiyou">新規内容</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="update text-center d-none text-success"><i class="fas fa-check"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ１</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="update text-center d-none text-success"><i class="fas fa-check"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ２</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="update text-center d-none text-success"><i class="fas fa-check"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ３</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="update text-center d-none text-success"><i class="fas fa-check"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
<tr class="bg-white shadow rounded">
<td class="listWithHandle" data-name="tenkenNumber" scope="row"></td>
<td data-name="tenkenBasho">データ４</td>
<td data-name="tenkenNaiyou">あいうえおかきくけこあいうえおかきくけこ</td>
<td data-name="tenkenYosoujikan" class="text-right">123</td>
<td class="edit text-center"><i class="fas fa-edit"></i></td>
<td class="update text-center d-none text-success"><i class="fas fa-check"></i></td>
<td class="delete text-center"><i class="fas fa-trash-alt"></i></td>
<td class="add text-center"><i class="fas fa-plus-circle"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
jQuery
// 並び替え機能
function sort(){
$('#sortTable').sortable( {
handle: '.listWithHandle',
animation: 200,
update: function(event, ui){
$('table tr').each(function(){
$(this).children('td:first-child').html($(this).index())
})},
});
}
自分で試したこと
widthが全体的に縮小しているので、widthを指定すると直るかと思いました。
ドラッグ中のためwidthの確認は検証画面にて黄色になった内容の「style=""」で確認する感じになるかと思いましたが、そのような様子がありませんでした。
ネットを参照していると、以下のURLのようにSortableならではの現象らしいのですが
解消につながる手がかりとして確認ができない状態なので困っています。
0