在可排序的UI中使表行动画向上移动

Question

我正在使用Sortable jQuery UI来允许用户拖放表行.这允许用户根据他们的偏好对表中的项进行排名.一旦用户完成了他的列表的订购,他们就会按下一个执行Ajax调用的保存按钮.新排名将保存到数据库中,表格将简要介绍.

我现在添加了一个额外的按钮,可以将项目直接发送到列表顶部.它也是ajax.它的工作原理非常好,除了我想要添加一个过渡效果,其中的意思<tr>会脱离并将自身拖到表的顶部,然后将下面的行向下推.这可能吗？这是我正在使用的代码:

此代码处理从"拖放"功能保存对数据库的更改的调用:

<input type="button" value="Save Queue" id="saveButton" class="list-button">

$(document).ready(function(){
    $("#sortable").sortable();
    $("#saveButton").click(persist);
});

// Persist function (save order)
function persist() {
    var data = $("#sortable").sortable('toArray');
        $.ajax({
            traditional: true,
            url: "/gz/index.cfm/membros/rankListByAjax?order="+data, 
            type: "POST", 
            success: function(msg){ 
            $("#sortable tr").effect("highlight", {}, 1000);
            } 
        });
}

以下代码是我添加的新"发送项目到顶部"按钮.这是我希望过渡发生的时间:

<form ...onsubmit="

$.ajax({ 
dataType: 'script', 
type: 'post', 
url: '/gz/index.cfm?controller=membros&amp;action=send-item-to-top&amp;key=1082&amp;format=js&amp;modType=replace',
data: $(this).serialize(), 
success: function(data, textStatus){$(this).attr('disabled','false');}, 
beforeSend: function(XMLHttpRequest){$(this).attr('disabled','true');}}); return false;" text="&uarr;">

Answer 1

我想我在某处读到，将表行添加到现有表中更加困难。这与某些浏览器为您添加 tbody 标签有关，而其他浏览器不喜欢没有包含 table 标签的 tr 标签（即）。

如果可能的话，您可以将表格转换为 div（或可能是 lis），然后我认为您可以解决这个问题。我认为 jQueryUI 的可拖动有这个限制，不确定。

如果无法离开表格，您可以隐藏该行，然后立即将该行移动到适当的位置，并创建一个看起来像它的 div 并移动它，然后在动画结束后杀死动画 div 并显示新行。

哈