如何在 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 中手动触发“更新” 的相关文章

  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时
  • JavaScript / jQuery 中的范围[重复]

    这个问题在这里已经有答案了 显然我写了太多的 CoffeeScript 因为我现在意识到我对纯 JS 中的作用域没有基本的了解 玩了一段时间后 我无法弄清楚以下问题 document ready function var myUrl htt
  • 使用 jquery 显示/隐藏特定类的内容

    我是 jquery 的新手 也许这是一个愚蠢的问题 但我几乎到处都在寻找答案 但没有找到 那么 我们开始吧 我想根据我在下拉表单中选择的选项来显示不同的内容 正如我在 StackOverflow 上了解到的 您可以使用更改函数来执行此操作
  • 两个 OnClick 事件重叠

    我在元素内有一个元素 当我单击下面的元素时 我希望打开滑块 当我单击最外面的元素时 我希望滑块关闭 不幸的是 当我单击最外面的元素时 它也会单击下面的元素 有没有办法只单击最外面的元素而忽略下面元素的单击 这些事件在单击时触发并使用 Jav
  • JQuery hide() 和 fadeOut() 、 show() 和 fadeIn() 之间的区别

    我是 jQuery 新手 目前 我正在我的跨平台移动应用程序之一中使用 jQuery 我需要根据各自的条件隐藏和显示我的一些页面内容 我发现以下两种方法对我来说效果很好 myControlId fadeOut myControlId hid
  • 选择变量的嵌套元素 - jQuery

    我希望将变量传递给函数并让函数选择该变量中的元素 我不熟悉这种情况的语法 但是有人可以建议吗 例如 当在容器内单击按钮时 我希望将该容器存储在变量中 好吧 我有那部分 但后来我希望选择该容器中的某个元素 例如 container div e
  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • Rails 4 可安装引擎,找不到文件“jquery”

    我正在创建一个 Rails 可安装引擎插件 它使用 gem jquery rails 我在 gemspec 文件中添加了这段代码 s add dependency jquery rails gt 3 0 1 and run bundle i
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • jQuery 可以在用户输入数字时添加逗号吗?

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun
  • 动态地将工具提示文本设置为 div 元素

    我正在尝试动态地将工具提示文本设置为容器 div 并对我刚刚添加到有序列表的每个 div 元素 elem Alias Status 使用 jQuery function addNewElement elem var li li li li
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • 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