拒绝可排序列表中无效的可排序项目

2024-01-12

我尝试了很多方法但没有成功:(我有两个相互连接的可排序列表。问题是列表“A”可以接受其中的任何列表项。但是列表“B”只能接受具有 class =“abc”的项目

代码如下

<ul id='A'>
  <li>item A1</i>
  <li>item A2</i>
  <li class='abc'>item A3</i>
</ul>

<ul id='B'>
  <li class='abc'>item A1</i>
</ul>

我正在尝试的 jquery 代码是

$('#A').sortable({revert: true, connectWith: '#B'})
$('#B').sortable({revert: true, connectWith: '#A', over: function(event, ui){
   if(!ui.item.hasClass('abc')){
     ui.placeholder.addClass('ui-state-error');
     ui.sender.sortable('cancel');
   }
}})

有错误的地方请指导一下,谢谢


您可以尝试使用 receive 事件,尽管这样做有点延迟并且 addClass 不起作用:

$('#A').sortable({revert: true, connectWith: '#B'})
$('#B').sortable({revert: true, connectWith: '#A',
    receive: function(event, ui){
        if(!ui.item.hasClass('abc')){   
            $(ui.placeholder).addClass('ui-state-error');                    
            $(ui.sender).sortable('cancel');
        }}
})​;​

例子 -http://jsfiddle.net/b5ykk/1/ http://jsfiddle.net/b5ykK/1/

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

拒绝可排序列表中无效的可排序项目 的相关文章

随机推荐

  • Angular 5:通过求和值验证多个输入字段

    我想通过总结多个数字输入字段的值并为 Angular 创建自定义验证器来验证它们 每个输入看起来像这样
  • Symfony 表单 EntityType 缓存

    在 Symfony v3 2 中 我使用带有多个 EntityType 字段的表单 其中有数百个选项 每个选项都是一个相对较大的对象 因为它们不会经常改变 所以我想在 Symfony 中使用一些缓存 加载它们一次 然后继续为 EntityT
  • 当 X 未定义时,为什么没有“#if X”警告?

    我偶尔会写这样的代码 file1 cpp define DO THIS 1 if DO THIS stuff endif 在代码开发过程中我可能会切换定义DO THIS0 到 1 之间 最近 我不得不重新排列我的源代码并将一些代码从一个文件
  • Android studio 启动失败:初始化“null”时发生致命错误

    我不知道我的 Android studio 发生了什么 当我启动它时 它显示了如下错误消息 我尝试卸载 重新安装它 但它不起作用 谁能帮助我 Internal error Please report to https code google
  • 如果与 async/await 一起使用(使用 Dapper 从 SQL Server 流式传输数据),返回 IEnumerable 会发生什么情况?

    我正在使用 Dapper 从 SQL Server 中的一个非常大的集合中传输数据 返回效果很好IEnumerable并打电话Query 但是当我切换到QueryAsync 该程序似乎尝试从 SQL Server 读取所有数据而不是流式传输
  • Paramiko SSH 隧道关闭问题

    我正在编写一个 python 脚本 通过已建立的 ssh 隧道经常查询一些远程数据库 我对 paramiko 库相当熟悉 所以这是我选择的路线 我更愿意将其保留在完整的 python 中 这样我就可以使用 paramiko 来处理关键问题
  • JavaScript 对象有全序吗?

    标题基本概括了所有内容 JavaScript 在使用时是否保证对象的总顺序 lt gt lt and gt 运营商 我编写了一些代码只是为了检查某些对象的总排序 结果与全序一致 但这并不能证明任何事情 function thereIsTot
  • OnNavigedTo 重写方法中“base.OnNavieratedTo(e)”的用途是什么?

    当重写页面中的 OnNavigedTo 方法时 他们将这行代码放入其中 base OnNavigatedTo e 我一直在删除它 但没有注意到任何奇怪的行为 这行代码是做什么用的 我们应该离开它吗 或者这就像一个占位符 我很确定这不是特定于
  • 在 Swift 中检测 GMSPolyline 上的点击?

    我正在努力检测在我的 Google 地图上绘制的 GMSPolyline 上的点击 它与 GMSpolygones 配合得很好 但同样的方法似乎不适用于折线 我当前适用于多边形的方法是 if GMSGeometryContainsLocat
  • 带有 jvm 参数的可运行 jar

    我试图使用 Eclipse 创建一个可运行的 jar 文件 问题是我在 Eclipse 中添加到运行配置中的 vm 参数没有以任何方式保存 我知道我可以创建一个批处理文件来运行带有所需参数的 jar 但我希望我的用户只运行 jar 本身 因
  • 调整 ToolStripButton 的大小以适合完整的背景图像

    我的目标是完全适合 toolStripButton 和 toolStripDropDownButton 中的图像 如果按钮中的图像设置了图像属性 我无法完全适应按钮中的图像 因为边距 边框或按钮的某些东西 我不太清楚 所以我尝试使用 Bac
  • autopep8 似乎没有找到配置文件?

    根据 autopep8 的文档 此处 https github com hhatto autopep8 configuration https github com hhatto autopep8 configuration 如果我在 gi
  • Route.Component 没有任何构造或调用签名 - React Router with TypeScript

    路线是根据对象列表构建的 但打字稿突出显示了错误 属性 IRoute component React ReactNode JSX 元素类型 route component 没有任何构造或调用签名 在纯 JavaScript 中 一切都运行良
  • 如何存根 Typescript 接口/类型定义?

    我在 AngularJS 1 X 项目中使用 Typescript 我使用不同的 Javascript 库来实现不同的目的 为了对我的源进行单元测试 我想使用类型 接口 来存根一些依赖项 我不想使用 ANY 类型 也不想为每个接口方法编写一
  • 使用 Java 将变量值插入 SQL Server

    到目前为止 只有当我在executeUpdate 语句中声明值时 我才能将数据插入到我的SQL 表中 我想知道是否有一种方法可以将这些值作为变量传递 我将在执行方法中将其声明为参数 如下所示 public void updateSQL St
  • 如何更快、更智能地突出显示单词/术语?

    我有一些文字 p class drag Hello world Attack on Titan season two p 目前 如果用户想要用光标突出显示单词 术语 他们将逐个字母地单击并拖动 我希望这个过程能够更快一些 例如 如果用户开始
  • cron 作业不会写入文件

    我运行 Windows 2003 服务器并尝试每 15 分钟运行一次这样的代码 require db connect php conn db connect list online brukere flytt funksjon til se
  • 角度 js 工厂内的访问范围

    我正在使用离子框架 并且需要能够从代码中的多个位置调用弹出窗口 因此我想将其移至工厂中 弹出窗口使用输入字段 我想获取它的值 通常我会打电话 scope parentGate answer但因为它在工厂里 所以我无法访问范围 有什么想法如何
  • 使用 servlet 在 Java 中上传文件

    我正在使用 javazoom 进行上传 protected void processRequest HttpServletRequest request HttpServletResponse response throws Servlet
  • 拒绝可排序列表中无效的可排序项目

    我尝试了很多方法但没有成功 我有两个相互连接的可排序列表 问题是列表 A 可以接受其中的任何列表项 但是列表 B 只能接受具有 class abc 的项目 代码如下 ul li item A1 li li item A2 li li cla