【发布时间】：2012-05-17 17:20:38
【问题描述】：
我正在使用来自 Google 的 CDN 的 jQuery 1.7 和 jQuery UI 1.8（所以我有最新版本）。
我的页面上有两个元素，一个标题导航和一个内容区域，其中包含对应于每个标题列表项的容器。目前，我将 Sortable 附加到两者，允许我重新排列导航元素和内容容器（单独）的视觉顺序。我试图实现的行为是，当我拖动导航元素时，内容容器会随之移动，当我将导航元素放在列表中的新位置时，内容容器会粘在内容中的新位置区域也是如此。我正在处理的网站是一个内网页面，所以我无法提供链接，但我在下面附上了一张图表：
Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree
在 NavOne 和 NavTwo 之间拖动 NavThree 后，整个排列应该是这样的：
Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo
有没有一种简单的方法可以链接两个 Sortables，使它们以这种方式运行？它并不真正必须流畅或“活”（尽管如果可以的话，我真的很喜欢）。在第一个列表中的重新排序完成（删除）之前，我可以不刷新第二个可排序列表。
我已经在 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>
在那一周里，我尝试了许多不同的可能解决方案，但没有一个能达到我想要的效果。我觉得这应该相对简单，但是在一周的工作中（断断续续），我没有得到任何有用的地方。
在寻找一些见解时，我已经阅读了以下相关主题：
- dragging multiple list items simultaneously
- JQuery Draggable + Sortable: How to tell if item was actually added to my sortable list?
- Sorting multiple items at the same time using jQuery UI
- jQuery UI Sortable: Multi-item select
- Is it possible to link two jquery.ui draggables together?
我认为，如果一切都失败了，我应该至少可以序列化可排序，将其 ajax 到服务器，然后根据序列化数据更新第二个列表，但我想保持这个本地浏览器以减少对服务器的调用（直到用户选择将新安排保存到他们的帐户）。
那么，StackOverflow ......这是我正在努力完成的合理/可实现的任务，还是我只是在这里用头撞砖？我应该寻找不同的方法吗？如果可能，我想避免修改 Sortable 插件，但如果必须，我会这样做。
我以前从未使用过 jsFiddle，但我意识到它可能会有所帮助，所以这里是：http://jsfiddle.net/34u7n/1/
【问题讨论】：
标签： jquery jquery-ui jquery-ui-sortable