Javascript jquery可排序拖放项
我正在使用sortable函数在我的表中进行拖放Javascript jquery可排序拖放项,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我正在使用sortable函数在我的表中进行拖放 我得到将跟随鼠标光标项的ui.item。但我想换件东西 项目1 项目2 项目3 如果我将项目1拖动到项目2，它们将更改其位置 项目2 项目1 项目3 我可以使用ui.item在停止事件中获取项目1数据。 但是我找不到任何函数来获取第2项数据 如何获取第2项数据？谢谢 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <
我得到将跟随鼠标光标项的ui.item。但我想换件东西 项目1
项目2
项目3
如果我将项目1拖动到项目2，它们将更改其位置 项目2
项目1
项目3
我可以使用ui.item在停止事件中获取项目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>
表，tr，td，th{
边框：2件纯蓝；
}
运输署{
宽度：自动；
右边填充：550px；
}
运输署，输入{
文本对齐：居中；
}
#移动{
背景：#555555；
宽度：30px；
高度：30px；
浮动：对；
颜色：#fff；
文本对齐：居中；
文本转换：大写；
线高：30px；
字体系列：Arial；
光标：移动；
}
类别
文件名
文件时间
PDF文件名
上传时间
三
编辑
去除
$（文档）.ready（函数（）{
//使表行可排序
$（'tbody'）。可排序（{
连接到：“tbody”，
不透明度：0.6，
手柄：“移动”，
轴：‘y’，
助手：函数（e、ui）{
ui.children（）.each（函数（）{
$（this.width（$（this.width（））；
});
返回用户界面；
},
卷轴：没错，
接收：功能（e、ui）{
警报（$（e.target）.attr（'id'））
}，//给出被删除位置console.log的id（ui.item[0].id）；
开始：功能（事件、用户界面）{
ui.item.startOrder=ui.item.children（'tr#orderTD'）.children（'#order'）.val（）；
ui.item.startIndex=ui.item.index（）；
//警报（ui.item.index（））；
},
停止：功能（事件、用户界面）{
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=开始指数-结束指数；
var json={}；
json.oldOrder=startOrder；
json.newOrder=endOrder+diff；
如果（差异！=0）{
updatePDF（JSON.stringify（JSON））；
}
}
}).disableSelection（）；
});
ul。项目项2的数据，请使用位置选择器。@Pugazh位置选择器是什么？例如ul:nth child（1）
我想获取项2以更新值标记中的一些数据。