я обнаружил, что это было гораздо сложнее, чем я ожидал, поэтому я принял удар на него. Я разветвил твою скрипку и сделал некоторые обновления.
Рабочий пример: https://jsfiddle.net/Twisty/n29ekt42/13/
Я добавил колонку ручки.
HTML
<table>
<thead>
<tr>
<th></th>
<th>T1</th>
<th>T1</th>
<th>T1</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
...
Много CSS, если вам нравится.
CSS
table {
border-collapse: collapse;
}
table thead tr {
margin-left: 20px;
}
table tbody tr {
border: 1px solid #ccc;
}
tr.ui-selecting {
background: #FECA40;
}
tr.ui-selected {
background: #F39814;
color: white;
}
.hidden {
display: none;
}
JQuery
function assignSortAttach() {
$("table tbody").sortable({
axis: "y",
cursor: "grabbing",
handle: ".handle",
opacity: 0.6,
helper: function(e, item) {
console.log("Parent-Helper: ", item);
if (!item.hasClass("ui-selected")) {
item.addClass("ui-selected");
}
// Clone selected elements
var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();
console.log("Making helper: ", elements);
// Hide selected Elements
item.siblings(".ui-selected").addClass("hidden");
var helper = $("<table />");
helper.append(elements);
console.log("Helper: ", helper);
return helper;
},
start: function(e, ui) {
var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');
ui.item.data("items", elements);
},
update: function(e, ui) {
console.log("Receiving: ", ui.item.data("items"));
$.each(ui.item.data("items"), function(k, v) {
console.log("Appending ", v, " before ", ui.item);
ui.item.before(v);
});
},
stop: function(e, ui) {
ui.item.siblings(".ui-selected").removeClass("hidden");
$("tr.ui-selected").removeClass("ui-selected");
}
})
.selectable({
filter: "tr",
cancel: ".handle"
})
}
$(function() {
assignSortAttach();
});
Это заимствовано из кода здесь: jQuery Sortable - drag and drop multiple items и здесь: jQuery UI sortable & selectable
Кредит для использования сортировать и выбирать вместе идет к mhu. Это работает очень хорошо, так как вы можете перетаскивать или CTRL + Нажмите, чтобы выбрать строки, как вам нравится. Вы можете перетащить и выбрать группу или щелкнуть элементы unqiue, которые будут группировать сопротивление. Затем, используя дескриптор перетаскивания, пользователь может отсортировать выбранные строки.
TJ дает нам возможность сортировать несколько элементов. Его демонстрация предназначена для перемещения элементов между отдельными списками, поэтому я переключил события receive на update.
Из легкомысленного комментария к ответу, я надеюсь, что это поможет.
Обновление после Комментариев
Рабочего пример: https://jsfiddle.net/Twisty/Lbu7ytbj/
изменить HTML сгруппировать строки:
<table>
<thead>
<tr>
<th> </th>
<th>T1</th>
<th>T1</th>
<th>T1</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"><span data-group="1" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
<tr>
<td>G1</td>
<td>G1</td>
<td>G1</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2"><span data-group="3" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
<tr>
<td>G2</td>
<td>G2</td>
<td>G2</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2"><span data-group="5" class="handle ui-icon ui-icon-grip-dotted-vertical"></span></td>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
<tr>
<td>G3</td>
<td>G3</td>
<td>G3</td>
</tr>
</tbody>
</table>
Теперь все, что я должен был сделать регулировки sortable использовать таблицу и не использовать thead.
function assignSortAttach() {
$("table").sortable({
axis: "y",
cursor: "grabbing",
handle: ".handle",
cancel: "thead",
opacity: 0.6,
placeholder: "two-place",
helper: function(e, item) {
if (!item.hasClass("selected")) {
item.addClass("selected");
}
console.log("Selected: ", $(".selected"));
var elements = $(".selected").not(".ui-sortable-placeholder").clone();
console.log("Making helper from: ", elements);
// Hide selected Elements
$(".selected").not(".ui-sortable-placeholder").addClass("hidden");
var helper = $("<table />");
helper.append(elements);
console.log("Helper: ", helper);
return helper;
},
start: function(e, ui) {
var elements = $(".selected.hidden").not('.ui-sortable-placeholder');
console.log("Start: ", elements);
ui.item.data("items", elements);
},
update: function(e, ui) {
console.log("Receiving: ", ui.item.data("items"));
ui.item.before(ui.item.data("items")[1], ui.item.data("items")[0]);
},
stop: function(e, ui) {
$('.selected.hidden').not('.ui-sortable-placeholder').removeClass('hidden');
$('.selected').removeClass('selected');
}
});
}
$(function() {
assignSortAttach();
$(".handle").attr("title", "Use me to drag and sort.");
});
Я также добавил CSS для заполнителя:
.two-place {
display: block;
visibility: visible;
height: 2.5em;
width: 0;
}
.two-place::after {
content: "";
border: 1px dashed #ccc;
float: left;
background-color: #eee;
height: 2.5em;
width: 100px;
}
Вы на самом деле не задал вопрос здесь, не сказали нам, что вы пытаетесь сделать ...? –
Посмотрите на использование Selectable with Sortable. – Twisty