ソート可能な関数を使用してテーブルにドラッグアンドドロップします。
マウスカーソル項目に続くui.itemが表示されます。しかし、私は交換の項目を取得したい。jqueryソート可能なドラッグアンドドロップ項目
項1
項2
項3
私は項2に項目1をドラッグすると、彼らは自分の位置を変更します。私は停止イベントにおける項目1つのデータを取得するためにui.itemを使用することができます
項2
項1
項3
。 しかし、アイテム2のデータを取得するための関数が見つかりません。
アイテム2のデータはどのように取得できますか？ありがとう
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
table, tr, td, th{
border: 2px solid blue;
}
td {
width: auto;
padding-right: 550px;
}
td, input {
text-align: center;
}
#move {
background: #555555;
width: 30px;
height: 30px;
float: right;
color: #fff;
text-align: center;
text-transform: uppercase;
line-height: 30px;
font-family: Arial;
cursor: move;
}
</style>
<body>
<div id="container">
<div class="panel panel-primary" id="main" role="main">
<table id='myTable'>
<thead>
<tr>
<th style="width:10px;text-align: center;"></th>
<th style="width:100px;text-align: center;">Category</th>
<th style="width:200px;text-align: center;">Document Name</th>
<th style="width:200px;text-align: center;">Document Time</th>
<th style="width:200px;text-align: center;">PDF File Name</th>
<th style="width:200px;text-align: center;">Upload Time</th>
</tr>
</thead>
<tbody>
<% if (item.length) { %>
<% for(var i = 0; i < item.length; i++) {%>
<tr>
<td align="center"><span id='move'>三</span></td>
<td id='orderTD' style='display:none;'><input id='order' value='<%=item[i].order%>'></input></td>
<td><input type='text' id='category' value='<%= item[i].Category %>' readonly></input></td>
<td><input type='text' id='docName' value='<%= item[i].docName %>' readonly></input></td>
<td><input type='text' id='docTime' value='<%= item[i].docTime %>' readonly></input></td>
<td><input type='text' id='fileName' value='<%= item[i].FileName %>' readonly></input></td>
<td><input type='text' id='fileUploadTime' value='<%= item[i].FileUploadTime %>' readonly></input></td>
<td align="center"><button id='edit'>Edit</button></td>
<td id='idTD' style='display:none;'><input id='order' value='<%=item[i].id%>'></input></td>
<td align="center"><button id='delete'>Remove</button></td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
//make table rows sortable
$('tbody').sortable({
connectwith: 'tbody',
opacity: 0.6,
handle: "#move",
axis: 'y',
helper: function (e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
scroll: true,
receive: function(e, ui) {
alert($(e.target).attr('id'))
}, //it give the id of dropped location console.log(ui.item[0].id);
start: function(event, ui) {
ui.item.startOrder = ui.item.children('tr #orderTD').children('#order').val();
ui.item.startIndex = ui.item.index();
// alert(ui.item.index());
},
stop: function (event, ui) {
var endOrder = parseInt(ui.item.children('tr #orderTD').children('#order').val());
var endIndex = parseInt(ui.item.index());
var startOrder = parseInt(ui.item.startOrder);
var startIndex = parseInt(ui.item.startIndex);
var diff = startIndex - endIndex;
var json = {};
json.oldOrder = startOrder;
json.newOrder = endOrder + diff;
if(diff != 0) {
updatePDF(JSON.stringify(json));
}
}
}).disableSelection();
});
</script>
</div> <!--! end of #container -->
</body>
あなたが探しているアイテムは、ドラッグされたアイテムをドロップした位置のすぐ上のアイテムではありません。つまり、新しいソート位置がインデックス2である場合は、探しているアイテムがインデックス1にありますか？ – haxxxton
'ul.item''sは交換されません。ソートされた項目 'ul.item'は削除され、新しい位置に挿入されます。 'Item 2'のデータを取得したい場合は、位置セレクタを使います。 – Pugazh
@Pugazhポジションセレクタとは何ですか？ –