jQuery UI Draggable + CSS Transform 导致 "Jumping"-6ren

jQuery UI Draggable + CSS Transform 导致 "Jumping"

转载作者：技术小花猫更新时间：2023-10-29 10:31:14

25

4

编辑: 我解决了。但是 StackOverflow 不允许我将我的答案标记为解决方案，所以我根本不会这样做。

我在将 Draggable 与 CSS 转换后的父级一起使用时遇到问题。基本上，我需要使用绝对定位在光标正下方生成一个 Draggable div。当绝对定位与 CSS 转换一起使用时，可拖动元素会在拖动发生时向右跳跃。跳跃发生后，行为按预期进行。如果没有对可拖动对象或父 div 应用转换，则不会发生跳转。

这是一个准确显示问题所在的 fiddle : http://jsfiddle.net/qBubN/7/

body {
     background-color: blue;   
}

#draggable {
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    width: 350px;
    height: 350px;
    color: white;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);}

     $("#draggable").draggable({
            scroll: true, 
            distance: 5,
            grid : [ 10, 10 ],
            start: function (event, ui) {
            }
        });

<html>
    <body>
       <div id="draggable">
           Hello!
        </div>
    </body>
</html>

已经尝试应用此补丁，但无济于事。这个修复程序很可能太旧而无法工作。我也有可能错误地应用了补丁。 Webkit and jQuery draggable jumping

最佳答案

//css3 transform bug with jquery ui drag - fixed(works fine whether position, absolute or relative)
var __dx;
var __dy;
var __scale=0.5;
var __recoupLeft, __recoupTop;

$("#draggable").draggable({
    //revert: true,
    zIndex: 100,
    drag: function (event, ui) {
        //resize bug fix ui drag `enter code here`
        __dx = ui.position.left - ui.originalPosition.left;
        __dy = ui.position.top - ui.originalPosition.top;
        //ui.position.left = ui.originalPosition.left + ( __dx/__scale);
        //ui.position.top = ui.originalPosition.top + ( __dy/__scale );
        ui.position.left = ui.originalPosition.left + (__dx);
        ui.position.top = ui.originalPosition.top + (__dy);
        //
        ui.position.left += __recoupLeft;
        ui.position.top += __recoupTop;
    },
    start: function (event, ui) {
        $(this).css('cursor', 'pointer');
        //resize bug fix ui drag
        var left = parseInt($(this).css('left'), 10);
        left = isNaN(left) ? 0 : left;
        var top = parseInt($(this).css('top'), 10);
        top = isNaN(top) ? 0 : top;
        __recoupLeft = left - ui.position.left;
        __recoupTop = top - ui.position.top;
    },
    stop: function (event, ui) {
        $(this).css('cursor', 'default');
        //alternate to revert (don't use revert)
        $(this).animate({
            left: $(this).attr('oriLeft'),
            top: $(this).attr('oriTop')
        }, 1000)
    },
    create: function (event, ui) {
        $(this).attr('oriLeft', $(this).css('left'));
        $(this).attr('oriTop', $(this).css('top'));
    }
});

关于jQuery UI Draggable + CSS Transform 导致 "Jumping"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17098464/

25

4

0

文章推荐： css - Font-Awesome 如何让字体缩放？

文章推荐： css - ASP.NET MVC4 捆绑 CSS 有些在 CDN 上有些在服务器本地？

文章推荐： css - 制作 CSS 伪元素 :before same height as main element

文章推荐： iphone - IOS:将语言添加为 Localizable.strings

riscv - 关于 "jump"和 "jump and link"之间翻译的问题
在 risc-v 规范中，它说 j 是 jal 的伪代码。我对它的工作原理感到困惑，因为 j (25 位立即数)和 jal (20 位立即数)的立即值范围不同 - 还有 jalr 带 12 位立即数。
assembly - 为什么不能使用 "jump and link"和 "jump register"进行递归？
希望这是我提出问题的正确位置。为什么不能使用这两个指令递归调用子例程？提前致谢! 最佳答案如果您“跳转并链接”，返回地址将存储在寄存器中。如果再次“跳转链接”，返回地址就会被新的地址覆盖，破坏原来
ssh - 创建从 Jump 主机到数据库的 SSH 隧道，并在 Jump 主机端口上访问数据库
我正在尝试在运行服务器端口的数据库和另一台服务器之间创建一个 SSH 隧道，如下所示。 MySQL:3306 Server-A:3306 我想使用 Server-A:3306作为连接到数据库的数据库
javascript - "Jump dictionaries"，switch 语句，或者如何在没有 eval 的情况下执行 "jump dictionaries"？
我喜欢包含键:值的“跳转字典”的概念，其中值是函数。不过，我不确定我是否应该喜欢这个概念。我想替换一长串 if if-else if 语句。 (我应该使用 switch 语句吗？) 有没有不用eva
javascript - jump-player-tab-container.js :129 Uncaught (in promise) ReferenceError: isActive is not defined(…)render @ jump-player-tab-container. js:129
我是 js 的新手我正在尝试通过 Prop isActive .但我收到一个错误。你们能告诉我为什么我会收到下面的错误代码吗？我在这一行收到了错误 import React from 'react'
ios - 高度约束动画 'jumping'
我一直在创建自己的 UIControl 子类以用于我的调整 iDunnoU .我已经完成了 UIControl，但展开/折叠动画除外。这个动画的问题是它在展开/折叠时会向下/向上“跳跃”，而不是像我原
java - 我如何在LWJGL中看到 "Jump"？
我正在尝试让相机在我的 LWJGL 程序中跳跃。我尝试编写一个 if/else 语句，它会说:“当你到达这个位置时，转到默认的起始位置。”到目前为止，它还在继续飞翔。这是我的代码: if (flyUp
Java游戏编程: Smooth Jumping
在过去的一个半星期里，我一直在使用 Java 和 Swing 从头开始编写游戏。到目前为止，游戏运行一切顺利，除了一件事:跳跃。我正在尝试实现抛物线跳跃，以便玩家不只是向上传送一点点。相反，我希望
julia - 带有稀疏矩阵的 JuMP？
我如何处理 JuMP 中的稀疏矩阵? 例如，假设我想施加以下形式的约束: A * x == 0 哪里A是一个稀疏矩阵和 x变量向量。我假设 A 的稀疏性可以被利用来使优化更快。如何在 JuMP 中利用
swift - "Jumping"到键盘上的数字？
我有一个文本字段，您通常在其中输入数字。但是，用户必须单击键盘上的数字按钮才能进入数字屏幕。有没有办法直接跳转到键盘上的屏幕并可以输入数字？如有任何意见和建议，我们将不胜感激。提前致谢。最佳答案
javascript - 创建粘性滚动导航栏时修复 "jump"
粘性导航栏“跳跃” 我最近制作了一个导航栏，它在滚动时粘在屏幕顶部(进入网页时它从中间开始)。我是在 Mac 上做的，一切正常。但是，当在我的 Windows 桌面上进入网页时，整个导航栏要么跳动，跳
css - 手机侧边栏 'jumping'
我有一个功能类似于 w3schools 的侧边栏，而 w3schools 的侧边栏显示相同的问题。侧边栏“跳跃”并在该区域留下难看的空间，当向下滚动页面和移动 chrome 的导航栏隐藏时，它在顶部留
css - 悬停后元素 "jumps"
我正在尝试创建一组在悬停时展开和收缩的 Font-Awesome 社交媒体图标。但是，当我停止将鼠标悬停在每个图标上时会出现问题，图标中间的图像会“跳跃”而不是像图标的其余部分那样平滑地折叠。这是代码
javascript - 在垂直自动滚动和循环垂直自动滚动中防止 "jump"
我的垂直自动滚动似乎在某些点不规律地停止，我想要一个平滑的滚动。其次，我希望垂直滚动自动重置(几乎无限循环或暗示它永无止境而不仅仅是跳跃)。我将如何着手完成这个？到目前为止，这是我的代码:http:/
Java游戏循环: Frame Jumps
我在 YouTube 上发布了一个视频，您可以在其中看到该问题。我放慢了视频速度，这样你就能真正看到跳跃。链接:https://www.youtube.com/watch?v=17Wftj2-MRM
CSS:访问或重新加载时页面 'Jumps'
我在 Drupal 8 中构建了一个站点(但我认为这是一个 CSS 问题)。当您重新加载页面时，页面“跳转”。它也会在您第一次访问时执行此操作，但如果您按“f5”，您会看得更清楚。我尝试删除 Log
ios - 如何防止此背景动画来自 'jumping'
如您所见，此背景将向下动画。我拥有我想要的一切正常工作，除了在动画完成后，它会跳转，这是我不想要的。我只希望它无休止地滚动而无需跳转到它。下面的 CodePen。关于如何在大约 10 秒后继续滚动而
jquery - 滚动时如何使固定的div JUMP？
更新:这基本上是我想要的，但 div 固定在底部 - http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/ 有
python - 简单的非面向对象神经网络的成本 "jumping"
我正在 Python 3.4 中使用 numpy 和矩阵构建一个神经网络草图，以学习简单的 XOR。我的符号如下: a 是神经元的事件 z 是一个神经元的输入 W 是一个权重矩阵，大小为 R^{#上一
jquery - 单击图库中的链接会导致页面转到 'jump'？
请原谅标题措辞不佳，希望我能在这里解释这个问题。我用 jQuery 编写了一个简单的画廊控件，其中有六个图像和两个按钮控件，允许用户循环浏览整个图像集合。我的这部分工作正常，但是每当我单击一个按钮在

首页

博学

6Ren·AI

商城

jQuery UI Draggable + CSS Transform 导致 "Jumping"