我正在使用谷歌CDN提供的jQuery 1.7和jQuery UI 1.8（因此我拥有最新版本）。
我的页面上有两个元素，一个是页眉导航，另一个是内容区域，其中包含与每个页眉列表项对应的容器。目前，我已经将Sortable附加到这两个元素上，使我能够分别重新排列导航元素和内容容器的视觉顺序。我想实现的行为是，当我拖动导航元素时，内容容器也会随之移动，并且当我在列表中的新位置放置导航元素时，内容容器也会粘着其在内容区域中的新位置。我正在处理的网站是一个内部网页，因此我无法提供链接，但我已经在下面包含了一个图表：
Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree
在将NavThree拖动到NavOne和NavTwo之间后，整个排列应该看起来像这样：
Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo
有没有一种简单的方法将两个Sortable链接起来，使它们以这种方式运作？它并不一定需要平滑或“实时”（虽然我真的希望它可以）。在第一个列表中重新排序完成（放置）之前，我可以接受第二个可排序列表不刷新的情况。
我已经在jQuery UI论坛上询问了这个问题，并等待了一个星期的回复：[LINK]。
这是我在测试这个项目之前用的样本框架：
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
/* This is my CSS */
/* Basic reset -- outline for debugging */
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
/* Main styles */
.containerDiv {
overflow-x: scroll;
overflow-y: hidden;
width: 800px;
height: 600px;
white-space: nowrap;
float: left;
}
.itemDiv {
width: 200px;
height: 500px;
display: inline-block;
}
.navBar ul, .navBar li {
display: inline;
}
</style>
</head>
<body>
<!-- This is my HTML -->
<div class="navBar">
<ul>
<li id="nav1">Navigation 1</li>
<li id="nav2">Navigation 2</li>
<li id="nav3">Navigation 3</li>
</ul>
</div>
<div class="containerDiv">
<div class="itemDiv" id="item1">Item 1</div>
<div class="itemDiv" id="item2">Item 2</div>
<div class="itemDiv" id="item3">Item 3</div>
</div>
</body>
<script>
/* This is my JavaScript */
// Make containerDiv children sortable on X-axis
$(".containerDiv").sortable({
axis: "x"
});
// Make nav children sortable on x-axis
$(".navBar").sortable({
axis: "x",
items: "li"
});
// Bind sorting of each (.navBar li) to its corresponding (.containerDiv .itemDiv):
$(".navBar li").bind("mouseup", function(event,ui){
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome's
// the (.navBar li) have ids of "nav1, nav2" and so on,
// and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
// which is my way of attempting to make it easier to link them.
// This line is my attempt to target the (.containerDiv .itemDiv) which directly
// corresponds to the (.navBar li) which is currently being sorted:
var tempId = "#" + $(this).attr('id').replace("nav","item");
// When this (.navBar li) is updated after a sort drag,
// trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
$(tempId).trigger("sortupdate");
});
</script>
</html>
在那一周里，我尝试了许多不同的可能解决方案，但都没有完全达到我想要的效果。我觉得这应该相对简单，但在这一个星期（断断续续）的工作中，我还没有取得任何有用的进展。
在寻找一些见解时，我已经阅读了以下相关主题：
- 同时拖动多个列表项
- JQuery Draggable + Sortable：如何判断项目是否实际添加到我的可排序列表中？
- 使用jQuery UI同时对多个项目进行排序
- jQuery UI Sortable：多项选择
- 是否可能将两个jquery.ui可拖动对象链接在一起？
因此，StackOverflow...我试图完成的这项任务是否合理/可实现，还是我只是在碰壁？ 如果可能，我想避免修改Sortable插件，但如果必须，我会这样做。
我从未使用过jsFiddle，但我意识到它可能有所帮助，所以在这里：http://jsfiddle.net/34u7n/1/
.itemDiv上的sortupdate时，似乎没有效果。我甚至附加了一个匿名函数来调用alert，当.itemDiv上的update事件触发时，它可以正常工作，但是当通过$(tempId).trigger("sortupdate")或$(tempId).trigger("update")从onSort函数调用时，它不会触发。我错过了什么吗？ http://jsfiddle.net/adriantp/v88QS/1/ - Adriansortupdate，就能将其移到所需位置。我想您需要检查最近移动的项目的新位置，并设置相应项目的位置为该新位置。不确定是否只是我不熟悉 jQuery，但我不明白它如何通过调用sortupdate来知道要移动的位置。 - Servy