Question

我最近被迫升级：

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()将从{{1}}列表中消失。

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

Answer 1

好吧，让我分享一下我发现的东西，以及我一路上忍受的吊索和箭头。

据我所知，jQuery UI神consider在id被draggable作为特征时从sortable删除了.sortable('serialize')。似乎这是介于1.8.9和1.9.2之间。

原因是人们不想要重复的ID。如果是这样，则id=""方法不应查找<li>，而应查找id的其他某些属性。（但是，serialize方法默认继续查找<li id="foo_123">。）

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

<li>

我们需要为这些<li id="foo_123" bar="foo_123">添加一个属性：

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

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

serialize

这应该可以解决问题。但是，在我的情况下还有一个吊索/箭头。 serializedSequence = serializedSequence.replace(/=/g,"[]=");方法未生成正确的序列化数组。（我不知道为什么，但我不能在这个功能上浪费更多时间。）因此，我需要添加：

{{1}}

更新：以下是其他人为类似解决方案做出的a fiddle。

希望这会有所帮助......

Answer 2

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

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

这将产生数组foo [] = 1＆amp; foo [] = 2 ...

更新了fiddle here

.draggable（）id在拖动/克隆时从<li>中删除</li>

2 个答案: