jQuery UI Sortable with Table Rows
HTML
<div>
<table id="sort1" class="bordered" title="" style="width:100%">
<tbody>
<tr>
<th>#</th>
<th>Проект</th>
<th>Value Stream</th>
<th>Владелец продукта</th>
<th>Критичность</th>
<th>Желаемый срок запуска</th>
<th>Бизнесс ценность</th>
<th>Видение</th>
<th>Ресурсы</th>
<th>Плановая продолжительность</th>
<th>Статус </th>
<th>Примечание</th>
<th>Раскрыть</th>
</tr>
<tr id='project_1'>
<td>#</td>
<td>Проект</td>
<td>Value Stream</td>
<td>Владелец продукта</td>
<td>Критичность</td>
<td>Желаемый срок запуска</td>
<td>Бизнесс ценность</td>
<td>Видение</td>
<td>Ресурсы</td>
<td>Плановая продолжительность</td>
<td>Статус </td>
<td>Примечание</td>
<td><button>Раскрыть</button></td>
</tr>
<tr id='project_2'>
<td>#</td>
<td>Проект</td>
<td>Value Stream</td>
<td>Владелец продукта</td>
<td>Критичность</td>
<td>Желаемый срок запуска</td>
<td>Бизнесс ценность</td>
<td>Видение</td>
<td>Ресурсы</td>
<td>Плановая продолжительность</td>
<td>Статус </td>
<td>Примечание</td>
<td><button>Раскрыть</button></td>
</tr>
<tr id='project_3'>
<td>#</td>
<td>Проект</td>
<td>Value Stream</td>
<td>Владелец продукта</td>
<td>Критичность</td>
<td>Желаемый срок запуска</td>
<td>Бизнесс ценность</td>
<td>Видение</td>
<td>Ресурсы</td>
<td>Плановая продолжительность</td>
<td>Статус </td>
<td>Примечание</td>
<td><button>Раскрыть</button></td>
</tr>
</tbody>
<table>
</table>
CSS
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0...
JavaScript
$(function() {
$(".bordered tbody").sortable({
start : function(event, ui){
console.log('id элемента',ui.item.context.id); // id - перетаскиваемоего элемента
console.log('Позиция',ui.item.context.sectionRowIndex); // Позиция
},
stop : function(event, ui){
console.log('id элемента',ui.item.context.id); // id - перетаскиваемоего элемента
console.log('Позиция',ui.item.context.sectionRowIndex); // Позиция
}
}).disableSelection();
});