Jquery 可使用向上/向下按钮排序

2024-01-04

当用户单击向上/向下按钮时,我试图获取排序顺序列表。这是我锻炼的演示链接http://jsfiddle.net/prabud/qy89psbr/ http://jsfiddle.net/prabud/qy89psbr/

function sendOrderToServer() {
  var items = $(".collection").sortable('toArray');
  var itemList = jQuery.grep(items, function(n, i){
                return (n !== "" && n != null);
        });
}

$(".collection").sortable({ items: ".item" });

$('button').click(function() { 
  var btn = $(this);
  var val = btn.val();
  if (val == 'up')
    moveUp(btn.parents('.item'));
  else
    moveDown(btn.parents('.item'));

  sendOrderToServer();
});

最后我出错了,它不符合用户选择的顺序。

请建议我获取排序订单列表的正确方法。


问题是因为animate是一个异步函数,所以你的sendOrderToServer函数将在动画完成之前被触发。

您可以将函数调用移动到动画完成回调中,它将起作用。

代码(moveUp):

function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0) return;
    prev.css('z-index', 999).css('position', 'relative').animate({
        top: item.height()
    }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({
        top: '-' + prev.height()
    }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);

        sendOrderToServer();
    });
}

Demo: http://jsfiddle.net/IrvinDominin/bvvLurxa/ http://jsfiddle.net/IrvinDominin/bvvLurxa/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 可使用向上/向下按钮排序 的相关文章

  • Magento - AJAX 将产品页面元素调用到类别页面。选择框未填充

    我正在尝试在我的 Magento 商店上创建 ajax 快速视图 或 快速购物车 类型功能 一种将鼠标悬停在产品上并可以选择在灯箱中 快速查看 它而不是转到产品页面的方式 我正在使用一个非常简单的 jQuery Ajax 调用 如下所示 j
  • 为什么jQuery一开始就有一个“window=this”并说它会加速对window的引用?

    当我打开 jQuery 的源代码时 我发现了这一行 var Will speed up references to window and allows munging its name window this 这条线路为何以及如何加速 ja
  • 这段 jquery 代码可以写得更短吗? (初学者)

    这是我第一次在 stackoverflow 上提问 所以如果我做错了什么请原谅我 我也是 jquery 的新手 但通过阅读和教程 我设法创建了一个工作示例 下面的代码是我创建的 这意味着我有三个带有可拖动需求的列表和三个可以删除需求的占位符
  • 按住鼠标时 JavaScript 重复动作

    是否有一个 JavaScript 函数每隔如此多的毫秒重复一次 以至于按住 html 按钮 如果这可以使用标准 JavaScript 来完成 那就太好了 但使用 jQuery 或 jQuery 插件也很棒 On the mousedown
  • jQuery 单击位于另一个 div 之上的 div

    我的 jQuery 有问题click当选择器是 a 时div那是在另一个之上div正如这里所看到的 the html div div div div css parent background color red width 100px h
  • 在成功回调之前修改 JSONP 结果

    我想从外部服务加载一些 JSON 数据 然而 它提供 foo bar useful 而我真正关心的是 有用 的部分 我需要将那部分传递给success打回来 我正在尝试使用Deferred一次从多个数据源加载 类似this https st
  • jQuery 的 .each() 方法是并行还是顺序运行其语句?

    在我的 HTML 页面中 我有 4 个列表项和以下 jQuery 代码 li hide each function this delay 500 fadeIn 1000 我假设 each 函数内的语句将为第一个列表项运行 完成后为第二个列表
  • jQuery翻译+切换,如何链接两者?

    我目前正在开发一个 jQuery 脚本 它将把网站的文本翻译成外语 我正在为此使用 Google Translate API 我希望该页面包含一个显示 En Espanol 的链接 当用户单击 En Espanol 时 页面正文会被翻译成西
  • 如何选中表格中输入文本焦点上的复选框

    我试图在输入文本焦点上检查表 DOM 中的复选框 但无法访问复选框元素 但我的焦点正在工作 这是我的 jsfiddle 链接https jsfiddle net 9qha9vft https jsfiddle net 9qha9vft 这是
  • 使用 Javascript 删除字符串的最后一个字符

    我有一个DIV与一些字符 如何在每次单击时删除文本中的最后一个字符DIV itself 删除第一个字符 div on click function this text function index text return text repl
  • HighStocks 可拖动元素干扰 gridster 拖动

    我正在使用 HighStocks 和 gridster 的股票图表 gridster 中的每个单独的块都可以自由拖动 然而 股票时间滑块小工具也可以拖动和调整大小 由于它位于 gridster 小部件的顶部 因此每当我拖动滑块时 整个小部件
  • Meteor 渲染回调并应用 jQuery 插件

    在将 jQuery 插件 如滑块或同位素 应用到从 Meteor 加载动态内容的 DOM 元素集合时寻找一种模式 如果您致电template rendered doc here http docs meteor com template r
  • 如何从 iframe 中设置 Chrome 打印对话框的默认文件名?

    我正在开发一个项目 我的部分项目是 iframe 中的仪表板 我有一个请求要提出just我正在处理的 iframe 可导出为 PDF 即 仅显示 iframe 内容 而不显示其周围的包装内容 我已经使用一些 jQuery 让它工作了 但是
  • 使用 moment.js 和 setInterval 动态日期和时间

    我试图找出如何使用显示动态日期和时间moment js http momentjs com 显然我无法弄清楚如何正确使用 setInterval 如果可能的话 我不想使用 jQuery 因为 moment js 不需要它 这是我到目前为止所
  • 如何通过 jQuery 加载部分视图?

    我正在尝试使用 jQuery 加载部分视图 正在从 Contact cshtml 加载部分视图 然而 在 Chrome 中 当我尝试加载partialViewName cshtml 时 我不断收到 404 错误 我有以下文件夹结构 View
  • 当位置从相对固定变为固定时,div 的宽度会发生变化

    当 div topNav 的位置样式从相对更改为固定时 其宽度会更改几个像素 我找到了一个 jquery 插件 http imakewebthings github com jquery waypoints 它可以优雅地执行我正在寻找的相同
  • 基于 ajax 的弹出窗口中的 Mathjax + CKEditor 4 + CKEditor

    我已经配置了 CKEditor 4 并且我的页面上有以下内容 我的页面中有一个 CKEditor 设置值的两个选项 这两个选项本身分别选项两个基于 ajax 的弹出窗口 这些基于 ajax 的弹出窗口包含 CKEditor 现在我有以下问题
  • jquery load() 去除脚本标签 - 解决方法?

    有谁知道 jquery load 的解决方法 去掉从外部内容加载的脚本标签 有很多文档证明这种情况发生 但在网上搜索了大约 4 个小时后我找不到解决方法 我正在加载动态生成的 div 类似于搜索结果页面 并且需要将 click 绑定到每个动
  • 使用 Ajax 和 PHP 上传图像

    我想将图像上传到我的服务器 并控制 HTML 代码中的 PHP 回显 为此 我想使用 jQuery Ajax 但我不知道如何使用 Ajax 将图像发送到 PHP 这是一个大学项目 所以我不能使用任何类型的插件 我的实际代码 HTML
  • 获取鼠标在滚动条上的位置

    当我向下滚动或向上滚动时如何获取鼠标位置 我试过这个 document mousemove function event captureMousePosition event scroll function event xMousePos

随机推荐