当前位置: 首页 > 知识库问答 >
问题:

jQuery Sortable的奇怪行为:拖动时框不会停留在同一个地方

臧欣怿
2023-03-14

我正在构建的仪表板上实现jQuery sortable,以便用户可以自定义其仪表板视图。

单击控制柄时,仪表板左侧和中心的元素行为正常。然而,当我尝试拖动最右边的元素时,它们表现出奇怪的行为。我仍然可以在网格周围拖放它们,但鼠标不会停留在手柄上。。。盒子在屏幕上跳跃。

这是怎么回事?为什么它只发生在边缘框上,有没有办法解决这个问题?

这是实时仪表板。查看源代码。

这是正确行为的截图。鼠标在移动符号框的一角:

这是一个奇怪行为的截图。鼠标实际上位于空白的灰色空间中,但模块已跳到浏览器的左下角:

共有1个答案

裘丰
2023-03-14

这与浏览器对百分比值的计算有关。

您正试图在各种组件中使用正好100%的浏览器宽度。例如,如果浏览器试图计算浏览器宽度的23%是4倍,然后计算1%的边距是8倍(加起来是预期的100%),不能保证这些组件的总和不会超过浏览器窗口的实际宽度后四舍五入。某些总宽度将起作用,而其他则不起作用。

让我们用数学把它分解一下。如果我们将宽度限制在503px的宽度,我们可以按如下方式进行计算,并看到我们超过了最大宽度。

503px*0.23宽=115.69≤116px

503px*0.01保证金=5.03≤5px

(4盒*每盒116像素)(4盒*2页边距*每页边距5像素)=464像素40像素=504像素

演示(不正确的行为)-最大宽度设置为503px

然而,如果我们将宽度限制为500px,计算结果恰好符合我们的预期。

500px*0.23宽=115px

500px*0.01余量=5px

(4盒*每盒115像素)(4盒*2页边距*每页边距5像素)=460px 40px=500px

演示(正确行为)-最大宽度设置为500px

这只发生在页面右边缘的项目上,因为那是包装发生的地方。当没有足够的可用水平空间时,设置为浮动:左的项将换行。这就是为什么项目基本上进入下一行的第一个位置。

实际问题似乎是由jQuery UI在排序期间执行的额外计算和DOM操作触发的,因为初始状态不受影响。

 类似资料:
  • 问题内容: 我正在尝试合并多个CSV文件。我的初始功能旨在: 在目录中查找并计算其中的文件数(假设所有文件均为.csv) 打开第一个CSV并将每一行添加到列表中 剪辑前三行(我不想要一些无用的列标题信息) 将这些结果存储在一个我称为“存档”的列表中 打开下一个CSV文件并重复(剪切并将它们附加到“存档”中) 当我们没有CSV文件时,我想将完整的“存档”写入单独文件夹中的文件。 因此,例如,如果我要

  • 我有以下代码来解析一个JSON文件: 要处理以下JSON文件: 如果我执行此代码,我将收到以下错误: 所以我开始一步一步地调试应用程序,看看part processing()中的哪个代码部分抛出了这个异常。令人惊讶的是,那里的所有代码都正常执行:没有抛出异常,也没有返回结果I except。 更让我惊讶的是,当我稍微改变第一种方法的代码时,它可以在不产生异常的情况下工作。 我不知道println方

  • 我正在使用Mapstruct映射将一个POJO转换为另一个POJO模型 以下是mapstruct自动生成的方法 该方法基本上获取源POJO的映射,并将其转换为目标模型的映射。生成正在通过。 当我运行代码时,我在这个方法中得到了ClassCast异常:HeaderAttributeGenericDataTypeMaptoStringEnergiectAttributeDataMap 堆栈跟踪: 我还

  • 问题内容: 我想用标题栏创建一个简单的框,其中包含标题和一些工具按钮。我有以下标记: 这个可以解决吗? 问题答案: 在最外面的div中指定宽度。如果内容div中的宽度表示此框的总宽度,则只需将其添加到最外面的div中,然后(可选)将其从内容中删除,如下所示:

  • 这是这个问题的后续问题。 发生的情况如下: 当我启动图形并拖动图形时,奇怪的事情发生了:在一定的间隔内,似乎每7个周期,烛台就会越来越小,直到它们变成一条条纹。然后,当我进一步拖动时,它们再次变厚,直到它们再次变为正常大小。这似乎每7个周期发生一次。 这种现象的一个示例显示在以下3张图片上: 下面的代码将准确地显示我的意思。只需编译并运行它。然后按住,用鼠标在图形上单击并按住。现在尝试向右或向左拖

  • 我有以下代码: 假设我现在将电脑的时区设置为太平洋时间(PDT为UTC-7),则打印 2012年6月29日星期五08:15:00太平洋标准时间 PDT不是比IST(印度标准时间)晚12.5小时吗?这个问题在任何其他时区都不会发生-我尝试了UTC、PKT、MMT等,而不是日期字符串中的IST。Java中有两个IST吗? 注意:实际代码中的日期字符串来自外部源,因此我不能使用GMT偏移量或任何其他时区