Question

我正在使用谷歌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/

Answer 1

排序更新无效的原因是您尝试将sortupdate事件附加到列表中的每个项目。 sortupdate未对列表中的每个项目触发，它会在列表本身上触发，您可以将事件作为一个整体附加到列表中，并获取已移动的项目，如下所示

$(".navBar").sortable({
  axis: "x",
  items: "li",
  update: function(event, ui) { onSort(event, ui); }
});

//this should now at least be firing when you move an item 
function onSort(event, ui)
{
    var tempId = $(ui.item).attr('id').replace("nav","item");
    alert(tempId);
}

Answer 2

AFAIK没有可用于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 - 使两个Sortables同时移动

2 个答案: