在 jQuery 可排序中对多个选定项目进行排序?

2024-05-17

我试图在 jQuery 可排序集中选择多个项目,然后将选定的项目一起移动.

这是我的弱点开始尝试使其发挥作用 http://jsfiddle.net/benstenson/CgD8Y/。这是代码:

HTML:

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

JS:

$('.container div').draggable({
    connectToSortable: '.container',
    //How do I drag all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container').sortable({
    axis: 'y',
    //How do I sort all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container div').live('click', function(e) {
    $(this).toggleClass('selected');
});

CSS:

body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}

我不知道我的方向是否正确。我在网上找不到这样的例子。Just https://stackoverflow.com/q/5222423/850990 lots https://stackoverflow.com/q/1094156/850990 of https://stackoverflow.com/q/1718851/850990 related https://stackoverflow.com/q/6303528/850990 问题 https://stackoverflow.com/q/3774755/850990. https://stackoverflow.com/q/1489226/850990有人知道怎么做吗?

例如,如果我从 6 个列表中选择了项目 4 和 5。我希望能够将 4 和 5 拖动到集合的顶部以获得此顺序 -4 51 2 3 6 - 或者如果我选择 5 和 1 并将它们拖到底部 - 2 3 4 61 5


这似乎适用于多分类的 http://archive.plugins.jquery.com/project/multisortable插入。代码如下。或者看jsFiddle http://jsfiddle.net/benstenson/qPJFe/.

// ctrl + click to select multiple
$('.container').multisortable({
    stop: function(e, ui) {
        var $group = $('.ui-multisort-grouped').not(ui.item);
        $group.clone().insertAfter($(ui.item));
        $group.each(function() {
            $(this).removeClass('ui-multisort-grouped');
        });
        $group.remove();
    }
});

但如果可多重排序怎么办breaks http://comp345.awardspace.com/sortable/js/ui.multisortable.js未来的 jQuery 版本?

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

在 jQuery 可排序中对多个选定项目进行排序? 的相关文章

  • 使用 Node.js 构建网站的最佳实践

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我想知道如何使用 Node js 从头开始 开发一个网站 我明白我怎么能possibly
  • Instagram 粉丝计数 - 使用 jQuery / json 和 PHP

    经过几个小时的工作和一些帮助萨希尔 米塔尔我们已经成功使用 jQuery json 和 PHP 检索 Instagram 关注者计数 这是我们设法整理的内容 希望对其他想要获取 Instagram 信息的人有所帮助 我们的 jQuery I
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 如何使用 Playwright 使用选择器查找框架 (iframe)

    我有一个小问题 无法找到使用 Microsoft Playwright 框架的答案 根据您可以使用以下代码获取 iframe const frame page frame frame login 但是如何使用选择器来查找 iframe 并与
  • nodejs (libuv) 事件循环是否在一个阶段(队列)中执行所有回调,然后再进入下一阶段或以循环方式运行?

    我正在研究 Node js 中 libuv 提供的事件循环 我遇到了关注 Deepal Jayasekara 的博客 https blog insiderattack net event loop and the big picture n
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 在 iOS 7 Safari 中,如何区分通过边缘滑动与后退/前进按钮的 popstate 事件?

    在 iOS 7 Safari 中 现在有两种后退 前进导航方式 使用底部的传统后退 前进按钮箭头或从屏幕边缘滑动 我正在使用动画在 ajax 应用程序中的页面之间进行转换 但如果用户通过边缘滑动进行导航 我不想触发该转换 因为这本身就是一个
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐

  • 在 C++11 中省略返回类型

    我最近发现自己在 C 11 模式下的 gcc 4 5 中使用了以下宏 define RETURN x gt decltype x return x 并编写这样的函数 template
  • 有什么工具可以说明每种方法运行需要多长时间?

    我的程序的某些部分速度很慢 我想知道是否有我可以使用的工具 例如它可以告诉我可以运行 methodA 花了 100ms 等等 或者类似的有用信息 如果您使用的是 Visual Studio Team System 性能工具 中有一个内置分析
  • 在 Perl 中使用数据引用的正确方法

    我有一组想要处理的数据 为了简化我的代码 最好通过指向原始数据的引用数组来访问我的数据的某些子集 比解释更好的是 我写下了这个例子 它还没有工作 最后 我想更新原始数据 而不必更新所有子集 用 Perl 可以做这样的事情吗 usr bin
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • 使用 Guice 优化注册表

    你好 今天思考了一种优化 有一些疑问 语境 我正在使用 Guice 2 进行 Java 开发 在我的网络应用程序中 我有一个转换器注册表 可以即时转换为某种类型 转换器描述如下 public class StringToBoolean im
  • 判断一个数字是否能被 3 或 5 整除 (FizzBu​​zz)

    如何根据输出是否能被 3 或 5 整除来更改输出 如果它能被 3 整除 我想显示 rock 如果它能被 5 整除 我想显示 star 类似于 FizzBu zz 如果两者都有 他们都会看到 这是我的代码 if var n Math floo
  • 如何在react-三纤维中提取并播放动画

    嗯 我有 gltf 动画模型 我成功加载模型 但无法播放嵌入的动画 我想知道是否可以以任何方式解决它 顺便说一句 我正在反应中工作 先感谢您 在这里您可以找到型号https drive google com file d 1ZVyklaQu
  • 揭秘sharedctypes性能

    在 python 中 可以在多个进程之间共享 ctypes 对象 然而我注意到分配这些对象似乎非常昂贵 考虑以下代码 from multiprocessing import sharedctypes as sct import ctypes
  • PyTorch:如何批量进行推理(并行推理)

    如何在PyTorch中批量进行推理 如何并行进行推理以加快这部分代码的速度 我从进行推理的标准方法开始 with torch no grad for inputs labels in dataloader predict inputs in
  • 原生元素聚焦功能不起作用

    我试图通过单击按钮自动聚焦在输入元素上 请参阅打字稿 ViewChild envFilter envFilter ElementRef onFilterSelect this envFilter nativeElement focus 在
  • Linux TUN/TAP:无法从 TAP 设备读回数据

    问题是关于如何正确配置想要使用 Tun Tap 模块的 Linux 主机 My Goal 利用现有的路由软件 以下为APP1和APP2 但拦截并修改其发送和接收的所有消息 由Mediator完成 我的场景 Ubuntu 10 04 Mach
  • 对使用 importlib.util 导入的对象进行酸洗

    我在使用Python的pickle时遇到了一个问题 我需要通过将文件路径提供给 importlib util 来加载一些 Python 模块 如下所示 import importlib util spec importlib util sp
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • Docker - SequelizeConnectionRefusedError:连接 ECONNREFUSED 127.0.0.1:3306

    我正在尝试使用 Docker 容器启动并运行我的 Nodejs 应用程序 我不知道可能出了什么问题 当我使用控制台调试凭据时 凭据似乎已正确传递 另外启动sequel pro并使用相同的用户名和密码直接连接似乎也可行 当节点在容器中启动时
  • 如何使用 Bokeh 动态隐藏字形和图例项

    我正在尝试在散景中实现复选框 其中每个复选框应显示 隐藏与其关联的行 我知道可以通过图例来实现这一点 但我希望这种效果同时在两个图中发生 此外 图例也应该更新 在下面的示例中 出现了复选框 但不执行任何操作 我显然不明白如何更新用作源的数据
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 如何在Python中按AaB而不是ABa顺序对字符串进行排序

    我正在尝试对字符串进行排序 为 punnetsquare 制作基因型 我目前的实现是 unsorted genotype ABaB sorted genotype sorted list unsorted genotype sorted s
  • 如何在 Django 中使用基于类的视图创建注册视图?

    当我开始使用 Django 时 我几乎使用 FBV 基于函数的视图 来处理所有事情 包括注册新用户 但当我更深入地研究项目时 我意识到基于类的视图通常更适合大型项目 因为它们更干净且可维护 但这并不是说 FBV 不是 无论如何 我将整个项目
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d