我正在使用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);
}
});
}
Run Code Online (Sandbox Code Playgroud)
以下代码是我添加的新"发送项目到顶部"按钮.这是我希望过渡发生的时间:
<form ...onsubmit="
$.ajax({
dataType: 'script',
type: 'post',
url: '/gz/index.cfm?controller=membros&action=send-item-to-top&key=1082&format=js&modType=replace',
data: $(this).serialize(),
success: function(data, textStatus){$(this).attr('disabled','false');},
beforeSend: function(XMLHttpRequest){$(this).attr('disabled','true');}}); return false;" text="↑">
Run Code Online (Sandbox Code Playgroud) jquery ×1