如何防止可拖动的子元素相互拖动?

2024-04-01

如何防止可拖动子元素在绝对位置相互拖动? 就像是:

if( ($("#firstChild").position().left) >= ($("#secondChild").position().left) )
{
    $(this).draggable({ disabled: true });
}

但这只会在停止拖动时禁用 Dragabble,目的是防止过度拖拽以某种方式...或者用 Droppable ???

对于案例 2 有什么想法吗?

EDIT:

另外,这对于child1child2 , so 不会发生重叠, but child1可以推child2在右边,和child2可以推child1在左边,重要的是没有发生重叠!


您可以使用 gamequery 插件。有碰撞检测。

您可以做的第二件事是:当您在拖动时悬停元素时...只需触发 drop ?所以他永远无法把它拖进去。将鼠标的拖动位置设置在被拖动元素的右侧,这样您就可以确定不可能将其拖动到该元素内。

我希望你明白我的意思

调用 drop 的示例:

$('#rightbox').live('mouseenter', function(){
  $('#leftbox').droppable.option('drop');
});

类似的东西......还没有测试过,但这是一种开始的方式

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

如何防止可拖动的子元素相互拖动? 的相关文章

  • 使用 babel env 预设时,展开运算符出现语法错误

    我正在努力 现代化 meern io 入门样板 https github com Hashnode mern starter通过替换巴别塔es2015 and stage 0预设为env 然而 似乎env预设无法识别以下片段client m
  • 从 puppeteer PDF 中删除分页符?

    我目前正在尝试查看是否有一种方法可以删除我的 puppeteer PDF 中的分页符 因为我当前的 PDF 设置中的一些分页符正在以一种奇怪的方式切断文本 我正在谈论的内容的屏幕截图 我的傀儡代码 app get companyId pdf
  • ASP.NET 验证控件和 Javascript 确认框

    我有一个使用 NET 服务器端输入验证控件的页面 此页面还有一个 javascript 确认框 在提交表单时会触发该确认框 当前 当选择 提交 按钮时 会出现 javascript 确认框 一旦确认 就会触发 ASP NET 服务器端验证控
  • 我可以使用 jQuery 的 AJAX 将表单信息提交到 Google Spreadsheets 吗?

    我喜欢能够使用谷歌电子表格 但以视觉方式集成到我的网站中很棘手 所以我想我会重新创建他们的表单 一个简单的剪切 粘贴 通过 AJAX 提交表单 数据将转到电子表格 我可以将我的用户重定向到比谷歌默认的 谢谢你所做的一切 更漂亮的东西你刚刚做
  • 获取选定的文本框 ID jQuery

    在我的表单中 我有几个文本框 例如txtItemCode1 txtItemCode2 etc 如果我在其中任何一个上按 Enter 键 我会使用此代码执行某些操作 但我想获取选定的文本框 ID 我怎样才能做到这一点 变量 id 应该有您正在
  • 为某个时刻添加持续时间 (moment.js)

    时刻版本 2 0 0 阅读文档后 http momentjs com docs manipulating add 我认为这很简单 Chrome 控制台 var timestring1 2013 05 09T00 00 00Z var tim
  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • JS:修改 JS 对象中的值/对

    我正在尝试找出修改对象的最佳方法 而无需三次写出类似的对象 所以我有这三个对象 var object1 start start end end type 1 var object2 start start end end type 2 va
  • 从浏览器访问本地文件?

    您好 我想从浏览器访问系统的本地文件 由于涉及大量安全检查 是否可以通过某种方式实现这一目标 或使用 ActiveX 或 Java Applet 的任何其他工作环境 请帮帮我 要通过浏览器访问本地文件 您可以使用签名的 Java Apple
  • 为什么 TypeScript 混合了模块和原型模式?

    我正在查看此页面上 TypeScript 生成的 JS 代码 http www typescriptlang org Playground http www typescriptlang org Playground 基本上 要创建一个Gr
  • chrome 选项卡/窗口中的 window.open 行为

    我有一小段 javascript 旨在打开两个或更多选项卡 这在 FF 和 IE 中工作正常 但 chrome 会在新窗口而不是选项卡中打开第二个窗口 它不依赖于 url 因为我已经尝试过使用两个相同的 url 第一个在选项卡中打开 第二个
  • 使用 jQuery 从 ASP.Net JSON 服务获取数据

    我正在尝试调用 Google 地图地理编码 API 从纬度 经度对中获取格式化的地址 然后将其记录到控制台 我正在尝试获取为给定位置返回的第一个 formatted address 项目 我很简单无法从 JSON 中提取该项目 我不知道为什
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 使用严格模式编译指示时如何声明全局变量

    使用自调用函数来包装严格模式兼容代码 通常称为严格模式编译指示 被认为是一种很好的做法 function use strict Strict code here 我的问题是在这种情况下如何声明全局变量 我今天知道的三种替代方案 替代方案 1
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att
  • 突出显示单词并提取其附近文本的函数

    我有一个文本例如 Etiam porta semmalesuada magna mollis euismod 整数取数 ante venenatis dapibus posuere velit aliquet 埃蒂亚姆 门塔 塞姆 male

随机推荐

  • Excel VBA 类型不匹配将范围传递给数组时出错[重复]

    这个问题在这里已经有答案了 我正在尝试检索工作表中单元格数组的值 存储为数组而不是简单单元格 但由于某种原因不断收到运行时错误 13 类型不匹配 我读过有关类似问题的帖子 但其中许多似乎与数组类型错误 即不是变体类型 或静态大小有关 这是调
  • 如何指定 xsi:type zeep python

    我使用 python 的 zeep SOAP 客户端 尝试将一些数据获取到某些 wsdl address 我现在有以下内容 ambCase data1 value1 data2 value2 client zeep Client wsdl
  • 如何访问Hadoop HDFS中的文件?

    我的 Hadoop HDFS 中有一个 jar 文件 包含我想要修改的 Java 项目 我想在 Eclipse 中打开它 当我打字时hdfs dfs ls user 我可以看到 jar 文件在那里 但是 当我打开 Eclipse 并尝试导入
  • 如何创建一个不会重新创建具有相同输入参数的对象的类

    我正在尝试创建一个不会重新创建具有相同输入参数的对象的类 当我尝试使用与创建已存在对象相同的参数实例化一个类时 我只希望我的新类返回指向已创建 昂贵创建的 对象的指针 这是我到目前为止所尝试过的 class myobject0 object
  • Laravel 4 无法运行整个 RAW 查询

    我想使用 laravel 的 DB 类来执行 mysql 查询 但 Laravel 提供的功能都不起作用 这些都不起作用 DB statement DB select DB raw DB update DB select DB raw 这是
  • 转义字符串以在 XML 中使用

    我正在使用Python的xml dom minidom创建 XML 文档 逻辑结构 gt XML 字符串 而不是相反 如何让它转义我提供的字符串 这样它们就不会弄乱 XML 像这样的东西吗 gt gt gt from xml sax sax
  • 如何将 AWS WAF 与应用程序 ELB 结合使用

    我需要对 AWS 上托管的 Web 应用程序使用 AWS WAF 以为其提供额外的基于规则的安全性 我找不到任何方法直接将 WAF 与 ELB 结合使用 并且 WAF 需要 Cloudfront 添加 WEB ACL 以根据规则阻止操作 因
  • 在Interface Builder中设计UITableView的节标题

    我有一个xib文件带有UITableView我想使用委托方法添加自定义节标题视图tableView viewForHeaderInSection 有没有可能设计成Interface Builder然后以编程方式更改其一些子视图属性 My U
  • 遗留代码中的泛型

    我们有相当多的代码刚刚跳转到 Java 5 我们一直在那些打算在 Java 5 版本中发布的组件中使用泛型 但是剩下的代码当然充满了原始代码类型 我已将编译器设置为生成原始类型错误并开始手动清除它们 但按照目前的速度 这将需要very很长时
  • 什么样的日志记录对您的应用程序来说是好的日志记录?

    因此 我们已经讨论了在我的工作地点进行登录 我想知道这里的一些人是否可以给我一些关于你们的方法的想法 通常我们的场景是 根本没有日志记录 并且大多数是 NET 应用程序 winforms WPF 客户端通过 Web 服务进行通信或直接与数据
  • 如何知道推送通知发送状态

    我正在应用程序中使用推送通知 一切都很顺利 有时从服务器发送的消息但在应用程序端它没有收到 在这种情况下 我必须知道缺少哪条消息无法传递 应用程序未收到 有没有办法从服务器端知道应用程序收到了哪些消息 哪些没有收到 不 推送通知是一劳永逸的
  • 如何在 Laravel Passport 中获取刷新令牌?

    我正在使用 Laravel 6 7 并尝试使用Passport用于用户身份验证 我可以在用户注册时为他们创建访问令牌 这是代码 user User create input user gt createToken auth token 正如
  • NUnit 与 Windows Phone 7 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想使用 NUnit 对我的 Windows Phone 7 库进行单元测试 是否有与 Windows Phone 7 兼容的 NUnit
  • 通过 React App 的数据表按钮

    在 React 中工作时 我在尝试添加 Excel 导出按钮时遇到了问题 我认为它与导入有关 但在这方面我在网上找不到太多与 React 和 DataTables net 相关的帮助 我只希望用户能够下载到 Excel 这些是我与 jque
  • 我在使用 log4js-protractor-appender 时遇到麻烦

    我的 log4js js 文件代码 use strict var log4js require log4js var log4jsGen getLogger function getLogger log4js loadAppender fi
  • 模块错误“模块是使用不兼容的 Kotlin 版本编译的。其元数据的二进制版本是 1.5.1,预期版本是 1.1.16”

    我正在为我们的项目编写一个 kotlin 库 完成后 我构建了一个 aar 文件并将其发送给团队 但他们有一个错误 Module was compiled with an incompatible version of Kotlin The
  • 如何使用tensorflow keras在网络中一起使用嵌入层和其他特征列

    让我们考虑一个包含 6 列和 10 行的示例数据集 这 3 列是数字 其余 3 列是分类变量 分类列被转换为大小为 10x3 的多热编码数组 我有目标列 我想要预测它也是分类变量 它可以再次采用 3 个可能的值 这一列是一个热编码的列 现在
  • Webpack 开发服务器 (webpack-dev-server) 热模块替换 (HMR) 不起作用

    我已经在 StackOverflow 和 GitHub 问题上查看了许多答案 但是 我仍然陷入 Webpack 中的热模块替换中 我在用npm start运行我的服务器webpack dev server hot inline 我正在尝试更
  • 如何使用 FOP 在 XSL-FO 中保留表头但允许在表体内分页

    我正在使用 Apache FOP 和 XSL FO 样式表生成 PDF 在 PDF 中 我输出属于表格的标题 html 相当于 h1 因此应始终保持在一起 但是 我的表格也可能包含太多数据 以至于一页纸上不一定能容纳得下 期望的结果是一个规
  • 如何防止可拖动的子元素相互拖动?

    如何防止可拖动子元素在绝对位置相互拖动 就像是 if firstChild position left gt secondChild position left this draggable disabled true 但这只会在停止拖动时