如何在 ui-sortable 中手动触发“更新”

2024-05-13

我正在使用可排序的 UI,每个项目中都有一个delete按钮。这是删除功能:

$('.delete_item').click(function(){
    $(this).closest('.grid_3_b').remove();
    initSortable();
    $(".sortable").sortable('refresh').trigger('update');
});

The div如我所愿被删除,但没有update数据发送到 PHP.. 所以我的脚本不会保存订单和删除的项目..

这是我的initSortable();功能:

function initSortable() {
    $( ".sortable" ).sortable({
        items: '.grid_3_b, .dropable',
        connectWith: ".sortable",
        placeholder: "placeholder",
        remove: function(event, ui) {
            if(!$('div', this).length) {
                $(this).next('.dropable').remove();
                $(this).remove();
            }
            initMenu();
        },
        receive: function(event, ui) {
            if( $(this).hasClass( "dropable" ) ) {
                if( $(this).hasClass( "gallery__item--active" ) ) {
                    $(this).before( "<div class=\"dropable gallery__item sortable\"></div>" );
                    $(this).after( "<div class=\"dropable gallery__item sortable\"></div>" );

                    initSortable();
                    $(".sortable").sortable('refresh').trigger('update');
                    initMenu();
                }
            }
        },
        update : function () {
            var neworder = new Array();
            $('.sortable').each(function() {
                var id  = $(this).attr("id");
                var pusharray = new Array();
                $('#' + id).children('div').each(function () {
                    var art = $(this).attr("data-art");
                    var pos = $(this).attr("data-pos");
                    pusharray.push( {data:{'art':art, 'pos':pos}} );
                });
                neworder.push({'id':id, 'articles':pusharray});
            });

            $.post("example.php",{'neworder': neworder},function(data){});
            initMenu();
        }
    }).disableSelection();
}

initSortable();

另外,remove函数通常会在列为空时删除列,但在删除列中的最新项目时不起作用。这是因为未调用更新触发器吗?


用于手动触发事件jquery-ui 可排序 http://api.jqueryui.com/sortable,您不需要在选项对象中指定处理程序,而是需要在可排序初始化后绑定事件处理程序。

例如以下内容将不起作用

$('ul').sortable({
  update: function () {
    console.log('update called');
  }
});
$('ul').trigger('sortupdate'); // doesn't work

后续作品

$('ul').sortable();
$('ul').on('sortupdate',function(){
   console.log('update called');
});
$('ul').trigger('sortupdate'); // logs update called.

Demo http://jsfiddle.net/eZcgR/1/

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

如何在 ui-sortable 中手动触发“更新” 的相关文章

  • 使用 jQuery 从标签获取值

    我想从标签中获取月份和年份的值 我如何使用 jquery 获取这些
  • JQuery 验证表单数组中的重复项

    我想显示重复或不唯一的值的错误 但我的表单接受输入数组 我已经在 jsfiddle 上检查了这些问题 name week 失败但是name week 工作正常 问题1 https stackoverflow com questions 24
  • AttachEvent 或 addEventListener - 存储在哪里?

    在 jQuery 中 如果我这样做 a click function Do something 点击事件存储在 a data events 我可以像这样获取它 jQuery each a data events function i eve
  • jQuery Datepicker:setDate 不是一个函数

    我目前正在尝试使内联日期选择器对象与日期输入交互 并且已经管理了除一件事之外的所有内容 当我尝试使用输入的更改事件时 它会抛出错误 Uncaught TypeError start widget setDate is not a funct
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • 识别http链接并创建锚标记

    我正在尝试解析一些字符串 它嵌入了一些 http 链接 我想使用 jquery 在此字符串中动态创建锚标记 然后将它们显示在前端 以便用户可以单击它们 有没有办法做到这一点 Thanks 你可以这样做 function get the st
  • 如何使用 jQuery 和“this”捕获更改的表单元素值

    我有以下代码 每当我的 Web 表单中发生元素更改时 该代码都会起作用 我一直在纠结的是如何捕捉表单字段元素 id name and 改变值当更改事件被触发时 谁能帮我解决这个问题吗 Thanks JavaScript
  • 在一个区域显示隐藏 div

    我一整天都在寻找与我想要的东西相匹配的东西 但我在任何地方都找不到任何东西 我想创建一个显示隐藏 div 在一个固定区域显示 隐藏 div 我想要在页面的一半上有一个拇指图库 在页面的另一半上我想显示与该拇指相关的完整配置文件 因此当我单击
  • jQuery 延迟可以取消吗?

    我遇到了一种情况 我想取消延期 延迟与 ajax 调用相关联 为什么我使用延迟 我不使用 ajax 返回的普通 xhr 对象 我使用的是 jsonp 这意味着我无法使用 HTTP 状态代码进行错误处理 并且必须将它们嵌入到响应中 然后检查代
  • 从单个正则表达式匹配文件名和文件扩展名

    我确信这一定很容易 但我很挣扎 var regexFileName match filename var regexFileExtension w match file extension function displayUpload va
  • jquery 中向上/向下滚动的区别? [复制]

    这个问题在这里已经有答案了 我找到了一些使用 jquery 检查滚动条位置的好方法 但我想知道您是否可以区分用户是向上还是向下滚动 检查最后的状态 像这样的东西 保留一个变量 比如说 last scroll position 当你有一个卷轴
  • Magento - AJAX 将产品页面元素调用到类别页面。选择框未填充

    我正在尝试在我的 Magento 商店上创建 ajax 快速视图 或 快速购物车 类型功能 一种将鼠标悬停在产品上并可以选择在灯箱中 快速查看 它而不是转到产品页面的方式 我正在使用一个非常简单的 jQuery Ajax 调用 如下所示 j
  • 在我的 div 标签中 有很多行非常长的文本 并且 div 元素当前是可滚动的 我想做的是找到特定字符串的第一次出现并自动滚动到包含该字符串的行 没有换行符或任何类型的字符串分隔符可以用来轻松近似滚动位置 我想我可以做这样的事情 var m
  • 未捕获的引用错误:i 未定义

    我正在尝试在我的数组上创建一个 for 循环 var lists a b c d JS for i 0 i lt lists length i console log lists i sa report btn lists i click
  • 无法从本地文件夹运行 Jquery

    你好 我是网络开发新手 我需要与JQuery 即使我已经成功尝试过一个jquery但仅在将文件复制到我的在线 ftp 文件夹后 我完全无法从本地文件夹运行它 请解释一下 如何我可以测试一些新脚本吗 进行额外的练习将文件复制到 ftp 文件夹
  • jQuery 日期选择器在 AJAX 之后不持久

    所以我使用 jQuery 日期选择器 它运行良好 我正在使用 AJAX 来获取一些内容 显然当应用这个新内容时 绑定会丢失 我上周了解到这一点 https stackoverflow com questions 2773573 jquery
  • 如何按日期升序对对象进行排序?

    如果我有一个对象列表 var objectList LIST OF OBJECT each object列表中包含三个属性 name date gender 如何按 对列表中的对象进行排序date 属性升序 the date 属性包含字符串
  • IE8 上 json 解析失败

    json gt 返回的响应 msg div p Unfortunately we were unable to process your application p br Please upload a CV br div status e
  • bootstrap-datetimepicker 仅显示日期

    我正在用这个repo https github com smalot bootstrap datetimepicker由 smalot 提供 我只想选择并显示日期 对于其他一些地方 我显示数据和时间 因此选择此存储库 我可以设法仅使用它来选
  • Twitter 引导选项卡和 JavaScript 事件

    我正在一个项目中使用 twitter bootstrap 特别是它的选项卡功能 http twitter github com bootstrap javascript html tabs http twitter github com b

随机推荐

  • Rails:页面加载时间很长

    我有一个 Rails 项目 我在一个控制器中遇到了非常奇怪的事情 浏览器需要大约 3 分钟来加载页面 但 Rails 在日志中写入 Completed 200 OK in 20563ms Views 17144 2ms ActiveReco
  • 让 Compass 将供应商前缀添加到动画选择器

    谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器中 我的配置文件如下所示 http path css dir sass dir images dir img javascripts dir js outpu
  • Xively 配置:多次激活设备/再次获取 API 密钥和 feed Id

    我正在测试嵌入式设备的配置 在该设备上电循环时无法保存 API 密钥和源 ID 激活产品一次后 我在第二次尝试获取设备 API 密钥和 feed id 时收到 403 禁止 即使我在发出请求时提供了主 API 密钥 具有读取权限 然而 当使
  • 使用 R:如何创建带有日期的时间序列对象?

    我有一年中每小时采集的一系列值 是否可以创建一个保留小时和年份值的时间序列对象 我的代码使用股票价格第一列中的值 但不使用日期 stockprices ts lt ts stockprices 1 start 1 freq 168 您没有提
  • 猫鼬的深层填充

    我有两个模式 一张用于用户 另一张用于帖子 在用户模式中 我有latestPost的一个属性 它是帖子模式中条目的ObjectId 当我加载用户对象时 我想将 lastestPost 作为对象获取 其中包含用户架构中作者的用户名 其中作者是
  • 如何为带有继承的 C++ 类编写 C 包装器

    我只是想知道是否有一种方法可以为具有继承的 C 类创建 C 包装 API 考虑以下 class sampleClass1 public sampleClass public int get return this data 2 void s
  • 合并两个 Joda-Time Interval 对象

    In 乔达时间 http www joda org joda time 有什么办法可以创建一个Interval http www joda org joda time apidocs org joda time Interval html作
  • 防止 Visual Studio Code 或 IDE 泄露 Python 类私有方法

    只是想问一个简单的问题 本质上 我想知道是否可以从 Visual Studio Code 或其他 IDE 提供的建议列表中隐藏 Python 类私有方法 例如 假设我们有一个类 A Creating a class class A Decl
  • 跨平台 C++ IMAP 库 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有任何可以从 C 使用的跨平台 仅对 Windows 和 OS X 感兴趣 IMAP 库 最好也是
  • 使用 SASS 切换用户主题 - Ruby on Rails

    所以我有一个 Rails 管理系统 允许用户选择一个主题 基本上是一组 SASS 颜色变量 它将使用新颜色重新编译 application css scss 当用户从下拉菜单中选择并提交时 更改此设置的最佳方法是什么 我阅读了一些有关缓存和
  • 监听 Vue.js 中的自定义事件

    Vue js 非常适合处理浏览器事件 例如click or mousedown 但根本不适用于自定义事件 这是代码 HTML div style display none div div div div div
  • MATLAB 可执行文件太慢

    我使用以下命令将 MATLAB 程序转换为基于控制台的应用程序deploytool在 MATLAB 中 MATLAB m文件执行大约需要 2 秒 但在我将其转换为可执行文件并调用 exe 执行需要45秒 太长了 我想将 MATLAB 程序与
  • 用于冒号分隔标签的 XML 解析器? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 Go 应用程序中处理打开/关闭数据库连接?

    我的 Web API 应用程序中有一组函数 他们对 Postgres 数据库中的数据执行一些操作 func CreateUser db err sql Open postgres user postgres password passwor
  • Google 自定义搜索优化以获取最新结果

    我在我的网站上使用谷歌自定义搜索引擎 我对此自定义搜索有两个改进 细化1 在我的博客上搜索 细化2 搜索我朋友的博客 但我需要第三次改进 搜索两个网站的最新结果 或过去 24 小时的结果 我可以在细化中添加一些可以做到这一点的运算符吗 或者
  • 为什么 data.table `:=` 的 knit 缓存失败?

    这在精神上与this https stackoverflow com q 15267018 1900520问题 但机制上一定不同 如果您尝试缓存knitr包含一个块data table 分配然后它的行为就好像该块尚未运行 并且后面的块看不到
  • TUI模式下的GDB:如何处理stderr与ui的交互

    我正在尝试使用gdb来调试caffe http caffe berkeleyvision org 我更喜欢使用 tui 模式 因为它允许我查看整个源代码而不仅仅是一行 但有一个问题 每当程序caffe输出一些东西stderr 输出扭曲了 t
  • 使用 Voronoi 图查找多边形的中线

    我正在使用概述的基于 Voronoi 图的方法here https stackoverflow com questions 37820629 centerline of a polygonal blob binary image找到根图像的
  • 0 因为饱和度和亮度不起作用,但 0% 在 hsl/hsla 中起作用?

    我正在尝试一个简单的演示 其中我为元素赋予了颜色hsl 根据我的经验 我知道0CSS 中的 ZERO 是无单位的 如果要指定 0 作为值 可以保留单位 然而 情况似乎并非如此hsl hsla 在 Chrome 和 Firefox 上 结果都
  • 如何在 ui-sortable 中手动触发“更新”

    我正在使用可排序的 UI 每个项目中都有一个delete按钮 这是删除功能 delete item click function this closest grid 3 b remove initSortable sortable sort