내 테이블에서 끌어서 놓기 작업을 수행 할 정렬 가능한 함수를 사용하고 있습니다.
마우스 커서 항목 뒤에 오는 ui.item이 나타납니다. 하지만 교환 품목을 갖고 싶습니다.jquery 정렬 할 수있는 끌어서 놓기 항목
항목 1 개
항목 2
항목 3
내가 항목 2 항목 1을 드래그하면, 그들은 그들의 위치를 변경합니다.
항목이
항목 내가 항목을 중지 이벤트 1 개 데이터를 얻을 ui.item를 사용할 수있는 3
1 개
항목. 그러나 항목 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'은 교환되지 않았습니다. 정렬 된 항목'ul.item'은 바로 제거되어 새로운 위치에 삽입됩니다. 'Item 2'의 데이터를 얻으려면 위치 선택기를 사용하십시오. – Pugazh
@Pugazh 위치 선택기 란 무엇입니까? –