2

我最近被迫升级：

  • jQuery 从 1.7.1 到 1.8.3
  • jQueryUI 从 1.8.9 到 1.9.2

（我被迫升级以兼容最新版本的 Blueimp 的 jQuery 文件上传。）

我有以下代码，在 (1.7.1 / 1.8.9) 下完美运行

$( "div.archive li" )
  .draggable({ // make the archive-icons draggable and connect to the album(s)
    connectToSortable:  handleSortable, // ,"#album_45 ul", //
    helper: "clone", // (helper must be set to 'clone' in order to work flawlessly),
    revert: "invalid",
    appendTo: "body"})

和

sortableUL.sortable({
    helper: 'clone',
    appendTo: "body",
    update : function () {
        var serializedSequence = sortableUL.sortable('serialize'); // Fails in jQueryui/1.8.21 !!
        $.ajax({
            url: "/callback/upAlbum",
            type: "post",
            data: serializedSequence,
            success: function(htmlData){
                sortableUL.html(htmlData);
                recursiveSortable(albumID, joPanel); // once the newly ordered zone-album has been read, recurse back to: make list sortable & slidable
            }
        }); // END $.ajax
    } // END update : function ()
});

上面的代码在旧 jQuery 和 jQueryUI 下运行良好，但在新版本下失败。如果我降级回旧版本，代码将再次工作（但我的 jQuery FileUploader 将无法工作！）。

新设置中不会生成错误消息。但是，会出现以下情况：

可拖动的列表项是<li id="icon_1234">. 当这些被放入 时.sortable()，它们被接受。因此，它们成为<li>了.sortable() <ul>. 但是，那时 将id="icon_1234"被删除。的其他属性<li>保持不变。

更新：实际上，id="icon_1234"当<li>附加到时 会被删除<body>，所以.droppable()显然不是问题的原因。但是，注释掉该appendTo:选项并不会改变问题。

当然，如果没有id="icon_1234"，新删除的内容将<li>无法在以下语句中继续存在：

var serializedSequence = sortableUL.sortable('serialize');

因此，在更新回调之后，新删除的将从列表中<li>消失。.sortable()

我真的不知道如何解决这个问题......

4

2 回答 2

2

好吧，让我分享一下我发现的东西，以及我一路上忍受的弹弓和箭矢。

据我了解，jQuery UI 大神们认为id从 a中删除draggableasortable是一项功能。似乎这是在 1.8.9 和 1.9.2 之间引入的。

原因是人们不想要重复的 ID。如果是这样，该.sortable('serialize')方法不应该寻找 ，id=""而是寻找<li>. （但是，默认情况下，serialize 方法会继续查找id's。）

所以，这是我的解决方法。您的列表项过去看起来像这样：

<li id="foo_123">

我们需要为这些添加一个属性<li>：

<li id="foo_123" bar="foo_123">

接下来，我们指示 serialize 方法查找新属性，而不是 id：

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo',
  attribute: 'bar'
});

这应该可以解决问题。但是，就我而言，还有一个吊索/箭头。该serialize方法未生成正确序列化的数组。（我不知道为什么，但我不能在此功能上浪费更多时间。）因此，我需要添加：

serializedSequence = serializedSequence.replace(/=/g,"[]=");

更新：这是其他人为类似解决方案制作的小提琴。

希望这可以帮助 ...

于 2012-12-12T08:09:43.257 回答
0

补充 Ivo Renkema 上面的答案，您可以在键上使用数组推送：

var serializedSequence = $('#sortableUL').sortable('serialize',{
  key: 'foo[]',
  attribute: 'bar'
});

这将产生数组 foo[]=1&foo[]=2...

在这里更新小提琴

于 2014-12-16T18:39:15.883 回答