jQueryUI Sortable - 使两个 Sortable 同时移动

我正在使用来自 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

是否有一种简单的方法来链接两个 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>

在那一周，我尝试了许多不同的可能解决方案，但没有一个能够完全按照我想要的方式工作。我觉得这应该相对简单，但在一周的工作中(断断续续)，我还没有得到任何有用的东西。

在寻找一些见解时，我已经阅读了以下相关主题:

我认为，如果一切都失败了，我至少应该可以序列化可排序的内容，将其ajax到服务器，然后根据序列化的数据更新第二个列表，但我想保留这一点本地浏览器以减少对服务器的调用(直到用户选择将新安排保存到他们的帐户)。

那么，StackOverflow...这是我想要完成的合理/可实现的任务，还是我只是在这里用头撞砖头？我应该寻找不同的方法来做到这一点吗？如果可能的话，我想避免修改 Sortable 插件，但如果我必须这样做，那么我会这样做。

我以前从未使用过 jsFiddle，但我意识到它可能会有所帮助，所以这里是:http://jsfiddle.net/34u7n/1/

最佳答案

据我所知，没有可用于 jQuery UI Sortable 的内置方法或模块，因此我编写了自己的 jQuery 代码来模拟此类功能。

仅当您想要基于一个主列表同步多个可排序列表并且所有列表具有相同数量的项目时，此解决方案才有效。也许它也可以使其以两种方式同步/移动，但我没有尝试。

<ul class="MasterList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="SecondList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="ThirdList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>


$( '.MasterList' ).sortable
({
    start: function( event, ui )
    {
        // Store start order of the sorting element
        ui.item.OrderStart = ui.item.index();
    },
    stop: function( event, ui )
    {
        // Total number of sorting element
        var OrderTotal = $( '#ObjectiveListSortable li' ).length - 1;
        // Store drop order of the sorting element
        ui.item.OrderStop = ui.item.index();

        // Only do the element sync if there is any change of order. If you simply drag and drop the element back to same position then this prevent such cases.
        if ( ui.item.OrderStart != ui.item.OrderStop )
        {
            // Sorting element dropped to top
            if ( ui.item.OrderStop == 0 )
            {
                $( '.SecondList' ).eq( 0 ).before( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( 0 ).before( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
            // Sorting element dragged from top or dropped to bottom
            else if ( ui.item.OrderStart == 0 || ui.item.OrderStop == OrderTotal )
            {
                $( '.SecondList' ).eq( ui.item.OrderStop ).after( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( ui.item.OrderStop ).after( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
            else
            {
                $( '.SecondList' ).eq( ui.item.OrderStop - 1 ).after( $( '.SecondList' ).eq( ui.item.OrderStart ) );
                $( '.ThirdList' ).eq( ui.item.OrderStop - 1 ).after( $( '.ThirdList' ).eq( ui.item.OrderStart ) );
            }
        }
    }
});

同步完成后，您还可以在辅助列表上触发事件 $( '.SecondList' ).trigger( 'refresh' ); ，以便可排序小部件识别顺序的变化以编程方式完成的项目。

关于jQueryUI Sortable - 使两个 Sortable 同时移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10640413/

jQueryUI Sortable - 使两个 Sortable 同时移动

上一篇：jquery - 将 jsTree 与 MVC .net 结合使用

下一篇：javascript - 如何在 ASP.NET 应用程序的折叠 div 中加载部分 View ？