背景
我基本上解析包含一些团队名称及其各自ID的数据。例如，我的原始数据看起来像这样 - ＆gt; teamName（MIAMI HEAT，id1）teamName（NewYork Knicks，id2）。
我根据自己的需要解析了这种数据。因此，一旦用户登录，他们就会被带到欢迎页面，其中包含一个导航菜单，该页面将显示我之前解析的各个团队的名称，如Miami Heat，NewYork Knicks等。我还在导航菜单上为每个团队创建动态页面。因此，例如，如果您点击迈阿密热火，您将进入www.something.com/index.html#id1页面
因此，对于Miami Heat页面的情况，页面ID是原始数据中较早的id1。
这就是我想要实现的目标
所以基本上在我的欢迎页面上，我有一个导航菜单，其中包含我目前能够拖放它们的所有各种团队。例如，如果我的导航菜单包含 迈阿密， 多伦多 纽约。 我可以将多伦多拖到最顶层，这样导航菜单中的顺序就可以了 多伦多 迈阿密 纽约
我想知道我能否反映出页面的实际顺序。因此，如果我将多伦多拖到顶部，当我向左滑动时，多伦多应该出现。如果我将NewYork拖到顶部，那么当我向左滑动NewYork应该出现。
有人可以给我指导如何实现这一点，甚至可能吗？对不起，如果这是一个不好的问题，我是js世界的菜鸟。请原谅我，因为我是自学js。
PS：我目前能够刷卡，但是它是一个随机顺序而没有响应拖放功能。
再次更新代码
<!DOCTYPE html>
<html>
<head>
<TITLE>BASKETBALL FANATICO</TITLE>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
<!-- TEST Jquery -->
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<!-- Style.css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<!-- Testing Drag -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>BASKETBALL FANATICO</h1>
</div>
<div id="loginfo">
<h2>Please Enter the Login Credentials</h2>
</div>
<form method="GET">
<div id="username" data-role="fieldcontain">
<input type="text" name="username" placeholder="User Name" />
</div>
<div id="password" data-role="fieldcontain">
<input type="password" name="password" id="txtId" placeholder="Password"/>
</div>
<div id ="loginbtn">
<a data-role="button" id="log" data-theme="b" href="#page2" data-transition="slide">Login</a>
</div>
</form>
<div data-role="footer" data-position="fixed">
<h1>NBA</h1>
</div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
<div data-role="header" data-positiion="fixed">
<a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
<h1>BASKETBALL FANATICO</h1>
<a data-iconpos="notext" href="#page2" data-role="button" data-icon="home" title="Home">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="b">WELCOME!</li>
<li>Use the menu on the left to navigate <br />and configure the various options.</li>
</ul>
</div>
</div>
<div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="push">
<div>
<div id="nav"><h3>Navigation Menu</h3></div>
<label>
<input id="chkSort" type="checkbox" checked="true" />Allow sorting</input>
</label>
</div>
<div id="items" data-role="button">
<!-- Insert Parsed Teams Here -->
<a href="#page1" data-transition="fade" data-theme="b" data-role="button">LOG OUT</a>
</div>
</div>
<script>
var teamNames = new Array();
var teamId = new Array();
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel().enhanceWithin();
});
$(document).on('pagecreate', '#page1', function() {
$("#log").on('click', function(){
alert('hellow');
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':$("input[name='username']").val(), 'password':$("input[name='password']").val()},
dataType: "text",
success: function (html) {
console.log(html);
console.log('==============>TESTING');
teamNames = new Array();
teamId = new Array();
var res = html.match(/teamNames(.*);/g);
for(var i =0;i<res.length;i++){
//alert(res[i]);
var temp = res[i].split(',');
if(temp.length >= 3){
teamNames[i] = (temp[2].replace('");','')).replace('"','');
teamId[i] = temp[1].replace("'","").replace("'","").replace(/ /g,'');
}
}
var AllTeams = ''
for(var i = 0; i<teamNames.length; i++){
AllTeams +='<a href="#'+teamId[i]+'" class="teamLink" data-theme="b" data-role="button" >'+teamNames[i]+'</a>';
var makePage = $("<div data-role='page' id='"+teamId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#panel' data-role='button' data-icon='flat-menu'></a><h1>BASKETBALL FANATICO</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>"+teamNames[i]+"</li><li><h2>0</h2></li></ul></div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>");
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllTeams).trigger('create');
}
});
});
});
$(document).on('pagecreate', '#page2', function() {
$("#items").sortable({
stop: function( event, ui ) {
teamNames = [];
teamId = [];
$(".teamLink").each(function() {
var href = $(this).prop('href');
var name = $(this).text();
var id = href.substr(href.lastIndexOf("#") + 1);
teamId.push(id);
teamNames.push(name)
});
alert(teamNames);
$("#items").listview('refresh');
}
}).disableSelection();
$("#chkSort").on("change", function(){
var sort = $(this).prop("checked");
if (sort){
$( "#items" ).sortable('enable');
} else {
$("#items").sortable('disable');
}
});
$(document).on("swipeleft", "#page2", function() {
$.mobile.changePage("#"+teamId[0], {transition: "slide", reverse: false});
});
$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
var curPageID = $(this).prop("id");
var ind=0;
for(var i = 0; i<teamId.length; i++){
if (curPageID == teamId[i]){
ind = i;
break;
}
}
var topageid = "page2";
var rev = true;
if (e.type == 'swiperight'){
if (ind > 0){
topageid = teamId[ind - 1] ;
}
} else {
rev = false;
if (ind < teamId.length - 1){
topageid = teamId[ind + 1] ;
}
}
$.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
});
});
</script>
</body>
</html>
答案 0 :(得分：2)
jQueryUI的可排序函数提供了一个停止事件，每次排序完成时都会触发该事件。因此，在该事件处理程序中，您按新顺序遍历团队并重建应该是页面上的全局变量的数组。
以下是 DEMO （基于其他问题的小提琴）
您的数组在任何函数之外声明，因此它们是全局的。
var teamNames = new Array();
var teamId = new Array();
首先，在列表中添加团队时，您正在使用prepend（），因为您希望保留列表底部的现有注销按钮。这使得您的团队以相反的顺序显示阵列。要更正此问题，您可以像这样添加团队：
var AllTeams = ''
for(var i = 0; i < teamNames.length; i++){
AllTeams +='<a href="#'+teamId[i]+'" class="teamLink" data-theme="b" data-role="button" >'+teamNames[i]+'</a>';
}
$('#items').prepend(AllTeams).trigger('create');
您正在以正确的顺序将所有团队添加到字符串变量中，然后最后将整个集合添加一次。 注意：我在每个链接中添加了一个名为teamLink的类，因此我可以在排序后轻松迭代它们。
然后是可排序的部分：
$("#items").sortable({
stop: function( event, ui ) {
teamNames = [];
teamId = [];
$(".teamLink").each(function() {
var href = $(this).prop('href');
var name = $(this).text();
var id = href.substr(href.lastIndexOf("#") + 1);
teamId.push(id);
teamNames.push(name)
});
$("#items").listview('refresh');
}
}).disableSelection();
在stop回调中，首先清空2个全局数组，然后使用类teamLink迭代所有链接。从文本中获取href和团队名称中的id并重建阵列。在小提琴中，我添加了一个警报，在每次排序后显示新数组，以便您可以看到新订单。
注意：在您的问题中的代码中，teamID和teamNames在某些地方拼写错误。您也可以在同一个循环中创建页面，将链接添加到面板。