- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 jQueryUI 的 draggable 和 droppable 交互,在我的应用程序中我只想允许将 draggable 拖放到单个放置目标中,理想情况下是离鼠标最近的目标,或者具有最多的目标与可拖动对象重叠。问题是我的放置目标有时会靠得很近,并且一个可拖动对象很可能会重叠多个放置目标。当我的可拖动对象与多个放置目标重叠时,我想仅在其中一个放置目标上设置 hoverClass,并且只允许放置在该目标上。这可以用 jQueryUI 实现吗?
我喜欢“触摸”公差的行为,所以我想尽可能保留它。这是一个 jsfiddle,它演示了我要解决的问题: http://jsfiddle.net/gDkAQ/2/
$('.draggable').draggable();
$('.droppable').droppable({
tolerance: 'touch',
hoverClass: 'drop-acceptable',
drop: function(event, ui) {
$(this).css({ 'background-color': '#00f' });
}
});
还有另一个库来自 ThreeDubMedia它提供了我正在寻找的确切功能(“重叠”容差模式),但不幸的是,该库似乎只适用于绝对定位的元素,所以我认为它不适用于我的应用程序。
最佳答案
我想出了一个解决方案,但它涉及到 jQueryUI 的脆弱鸭子冲压。有一个名为 $.ui.intersect
的内部函数确定是否可以将 draggable 拖放到 droppable 上。还有一个 $.ui.ddmanager.droppables
集合,其中包含页面上所有 droppables 的列表。我覆盖了 intersect
函数以支持“touch-closest-to-mouse” toleranceMode,它找到最接近鼠标的 droppable,并且仅当当前 droppable 最接近时才返回 true。这是我想出的解决方案:
(function () {
var defaultIntersect = $.ui.intersect;
var cursorX, cursorY;
$(document).mousemove(function (e) {
cursorX = e.pageX;
cursorY = e.pageY;
});
$.ui.intersect = function (draggable, droppable, toleranceMode) {
if (toleranceMode !== 'touch-closest-to-mouse') {
return defaultIntersect(draggable, droppable, toleranceMode);
}
if (!defaultIntersect(draggable, droppable, 'touch')) {
return false;
}
var acceptable = _.filter($.ui.ddmanager.droppables.default, function (d) {
return defaultIntersect(draggable, d, 'touch');
});
var closest = _.min(acceptable, function (other) {
var otherCenterX = other.offset.left + other.proportions().width / 2;
var otherCenterY = other.offset.top + other.proportions().height / 2;
return Math.sqrt(Math.pow(otherCenterX - cursorX, 2) + Math.pow(otherCenterY - cursorY, 2));
});
return droppable === closest;
};
$('.draggable').draggable();
$('.droppable').droppable({
tolerance: 'touch-closest-to-mouse',
hoverClass: 'drop-acceptable',
drop: function (event, ui) {
$(event.target).css({
'background-color': '#0f0'
});
}
});
})();
这适用于 jQueryUI 1.10.4。这是一个带有工作解决方案的jsfiddle: http://jsfiddle.net/gDkAQ/12/
关于javascript - jQueryUI 落在离鼠标最近的目标上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21692786/
我创建了一个基于命令行可移植脚本的工业化不可知构建系统,可用于快速构建多个依赖项目,而不必依赖特定的 IDE 或构建工厂。它是不可知的,因为它不是基于单个构建引擎。我使用 cmake 创建了第一个版本
我最初使用 Java 目标开发了一个语法(用于 TestRig 支持),然后将其移植到 Python(从 git hub 语法存储库扩展了 Python3 语法,因此需要将操作移植到 Python
我有一个以 iPhone 和 watchOS 为目标的 Xcode 项目。 iPhone 目标使用加速度计,模拟器不支持。我可以只启动 iPhone 应用程序而不启动 watch 目标吗?我从: Ca
您好,我想创建一个批处理文件,用于在 .eml 文件(目标 A)中查找某些关键字,然后删除它们所在的行。之后,我需要批处理文件将"new"文件放入(目标 B)中的单独 .eml 文件中。文件也可以是
当尝试通过 IntelliJ 运行示例 CorDapp (GitHub CorDapp) 时,我收到以下错误: Cannot inline bytecode built with JVM target
我在尝试向我的 kotlin spring 项目添加一些依赖项时遇到问题。我使用 spring boot 初始化程序来运行一个基本项目。 我的问题:如果我取消对 jackson 或 Koin 依赖项的
这是有问题的网站: http://www.onepixelroom.com/londonrefurb 当我点击关于部分后面的多个圆圈时,我希望它更改上面文本中的引号。 到目前为止,我得到它来显示 文本
单击后,我将删除两个元素 $(this) 和 $("#foo")。 目前我的代码如下所示: $(this).remove(); $("#foo").remove(); 如何在不重复自己的情况下优化它?
我有一个小脚本,可将 Markdown 文件编译为 html,并将其与一些样式表和 javascript 一起插入到模板的主体中。我有一个 GNU makefile 来完成这个: output.htm
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
一些背景知识: 在android中我们开发了同样的应用,基本上我们先开发了Android应用,现在我们创建了它的IOS版本,所以这个应用有多个客户端。在 android 中,我们实际上是使用 Andr
我想知道是否可以使用 knockout 来更改html中的目标() 我的所有其他信息都在 JavaScript 中,所以这对我来说是一个大问题。这是我的 JavaScript: var library
这个问题在这里已经有了答案: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using j
我在我的有向图中添加了一堆节点和顶点,使用设置 typedef boost::adjacency_list graph; 创建 Node有一个节点名称字符串,Edge它的分数有一个整数。我试图遍历所有
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 8 年前。 Improve
如何存储我在 NSUserDefaults 中创建的 Goal 类型的对象数组? ( swift ) 代码如下: func saveGoalList ( newGoalList : [Goal] ){
Array.prototype.indexOf 和 Date.now 已在 ES5 中引入。如果我编译存储在文件 test.ts 中的以下代码,为什么 Typescript 不能转译? Date.no
我正在阅读有关属性的内容,并了解到可以使用您的代码将它们应用于不同的目标实体 -(请参阅 Attribute Targets)。 因此,查看我项目中的 AssemblyInfo.cs 文件,我可以看到
给定一个 Makefile: all: build/a build/b build/c # need to change this to all: build/* build/a:
我有一个带有多框架目标的项目- netstandard2.0;net471 . 我想为 netframework 构建解决方案和 netstandard分别。 目前我使用这个 MSBuild 命令:
我是一名优秀的程序员,十分优秀!