Я немного не уверен, что вы имеете в виду.Я надеюсь, что я уловил основную идею, что вы хотите, чтобы первая ячейка в каждом ряду оставалась в порядке после сортировки элементов.Вот пример, который может работать для вас.
$(function() {
$(".Table .Heading").sortable({
items: '> .htab:not(:eq(0))',
cursor: 'pointer',
axis: 'x',
dropOnEmpty: false,
placeholder: "htab placeholder",
start: function(e, ui) {
var ind = ui.item.index();
$(".Table .rtab").each(function() {
$(".ctab", this).eq(ind).css("opacity", "0.25");
});
ui.item.data("orig-index", ind);
},
stop: function() {
$(".Table .rtab .ctab").css("opacity", "");
},
update: function(e, ui) {
var oInd = ui.item.data("orig-index");
var cInd = ui.item.index();
var cols = $(".Table .htab").length;
$(".Table .rtab").each(function() {
var cell = $(".ctab", this).eq(oInd).detach();
if (cInd < (cols - 1)) {
// Mid Col
cell.insertBefore($(".ctab", this).eq(cInd));
} else {
// Last Col
$(this).append(cell);
}
})
}
});
$(".Table").sortable({
items: '> .rtab',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function(e, ui) {
$(".ctab", ui.item).eq(0).html(" ");
},
stop: function(e, ui) {
$(".Table .rtab").each(function(ind, el) {
$(".ctab", el).eq(0).html((ind + 1));
});
}
});
});
.Table {
display: table;
}
.Title {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading {
display: table-row;
font-weight: bold;
text-align: center;
}
.rtab {
display: table-row;
}
.ctab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab {
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
.htab.placeholder {
background: #ccc;
width: 20px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Table">
<div class="Title">
<p>Drag table rows and columns</p>
</div>
<div class="Heading">
<div class="htab">
<p>Sl</p>
</div>
<div class="htab">
<p>Name</p>
</div>
<div class="htab">
<p>Designation</p>
</div>
<div class="htab">
<p>Salary</p>
</div>
<div class="htab">
<p>Location</p>
</div>
</div>
<div class="rtab" id="tblcols">
<div class="ctab">
<p>1</p>
</div>
<div class="ctab">
<p>Athira</p>
</div>
<div class="ctab">
<p>Developer</p>
</div>
<div class="ctab">
<p>6l</p>
</div>
<div class="ctab">
<p>Kottayam</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>2</p>
</div>
<div class="ctab">
<p>Timy</p>
</div>
<div class="ctab">
<p>Designer</p>
</div>
<div class="ctab">
<p>5l</p>
</div>
<div class="ctab">
<p>wayanad</p>
</div>
</div>
<div class="rtab">
<div class="ctab">
<p>3</p>
</div>
<div class="ctab">
<p>Liya</p>
</div>
<div class="ctab">
<p>Team Lead</p>
</div>
<div class="ctab">
<p>7l</p>
</div>
<div class="ctab">
<p>Kollam</p>
</div>
</div>
</div>
Для Заголовка мы можем отсортировать элементы заголовка, а затем переместить соответствующие им ячейки.Из-за взаимосвязи элементов в строках не существует элемента, который содержит все элементы столбца.Он эффективно делает то, что нужно, но выглядит немного странно.С помощью items мы можем исключить первый заголовок.
Когда вы используете Sortable для строк, вы хотите нацелиться на родителя, а затем, используя опцию items, вы можете выбрать строки, которые вы хотите отсортировать, и те,Вы хотите исключить.Так как мы сортируем строки, а не элементы внутри, нет хорошего способа исключить элемент в строке.
Когда начинается сортировка, ячейка 0 изменяется на , поэтому она не уменьшаетсяперебор.Как только сортировка остановлена, она переиндексирует строки обратно в порядок.Если мы используем update, он будет срабатывать только при выполнении изменения.Так что, если пользователь захватывает строку и не перемещает ее, это не update.Чтобы решить эту проблему, мы можем использовать stop для переиндексации.
Надеюсь, это поможет.