问题标签 [jquery-droppable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2487 浏览

javascript - Jquery如何指定哪个droppable应该与嵌套的droppable元素一起使用

我有一个小问题,我似乎无法自己解决。看看这个小提琴:JSfiddle

这是我遇到的问题的一个基本示例。我有一个大 div 是一个可放置的区域。在这个可放置区域内还有多个其他可放置区域。

当元素被删除时,内部的可放置区域应该穿过它的代码。相反,来自外部 div 的代码似乎在运行。难道我做错了什么?div 周围的区域应该保持这种方式,因为元素可以放置在这里(不是正式删除)。

我希望我的问题足够清楚,但我认为提琴手不言自明。

PS - 此示例中的调整大小不起作用,但在我的开发环境中起作用。


生锈和马克,谢谢你的回复。

对于令人困惑的调整器,我很抱歉。我刚刚从代码中删除了它。 新提琴手

只是为了澄清事情。box div 是一个包含多个图像的容器。我正在尝试实现以下目标: http ://postimage.org/image/qwhtik04f/ 灰色虚线框是我示例中的 dropbox2 div。这些投递箱周围的空间是投递箱 div。

有板的空间是唯一可以在没有任何事情发生的情况下丢弃图像的地方。拖动的图像可以捕捉回 dropbox2 div。如果图像被拖到 dropbox div 上,图像应该恢复。

0 投票
1 回答
303 浏览

jquery - 当 droptarget 完全被另一个元素遮挡时,停止 jquery droppable 接受

在我的用户界面中,我有许多弹出对话框,其中一些包含 jquery 可放置目标。它们工作正常,但是当一个弹出窗口完全覆盖放置目标时,我想阻止事件传播。

我试图在弹出对话框上放置一个事件处理程序以阻止 drop 事件传播,但这不起作用。

使用范围和接受选项似乎并不可行,因为对象和目标或多或少是相同的。

有任何想法吗?

0 投票
1 回答
761 浏览

jquery - 拖放时在可拖动元素处执行还原事件

我对 jQueryUI 和可拖放/可拖放选项有疑问。

我想要完成的是:

1)将一个元素拖到另一个元素中 2)一旦元素在那里,将可拖动元素恢复到其初始状态(并做一些其他的事情)

我可以通过执行以下操作将对象恢复为其初始状态:

但我想恢复元素,即使它被拖到正确的位置......

编辑

我试过这个:

但它不起作用......我也试图获得该选项并执行它,但它也不起作用。

0 投票
5 回答
1988 浏览

javascript - 创建多个放置在彼此顶部的可放置同级

我正在尝试创建多个彼此相邻的 jquery droppables,其中某些部分可能重叠,在这些情况下,我希望顶部的那个(z-index 明智)是贪婪的。

我尝试greedy: true在 droppable 中设置选项,但这似乎没有帮助。我也尝试过return falsedrop 事件并使用event.stopPropagation();.

这是一个基于jquery演示页面的jsfiddle

如果有另一个 droppable 触发它,是否有任何方法可以阻止 drop 事件传播,最好是具有最高 z-index 的那个?

0 投票
1 回答
287 浏览

jquery - 多次丢弃事件后的警报触发

我得承认,我几乎是一个菜鸟,但我一直在努力解决这个问题。我必须if在两次下降发生后触发,现在它在加载时触发。我在那里想念什么?

0 投票
1 回答
334 浏览

css - 将对象从一个div拖放到另一个div时如何保留格式

当一个对象从一个 div 拖放到另一个 div 时,li 中的格式只会更改为文本。我希望它具有相同的格式和样式,即删除后的“li”。

示例代码在这里

0 投票
0 回答
1047 浏览

jquery - JQuery - 每个 Droppable 必须接受一个且仅一个 Draggable

我对 JQuery 有一些问题 - Draggable/Droppable。我一直在谷歌搜索,也搜索了这个论坛。问题在一定程度上得到了解决,但我遇到的情况仍然会导致不需要的结果。

我在这个线程中提出了一些答案:jQuery UI - Droppable only accept one draggable

所以我的任务基本上是建立一个拖放系统,其中只有一个Draggable 项目可以放在一个 Droppable 项目上。好的,首先,如果 Draggables 已经放出来了,你需要设置它们的 Droppables 是忙的。我为此使用了一个创建函数。

这是一些代码:

我的问题:如果用户拖动一个项目并且未能将其放在接受的 Droppable 上,它会恢复。这意味着它没有被删除并且 drop: 函数永远不会运行。这意味着这个 Droppable 现在接受可拖动类的每个项目,即使那里有一个项目(恢复的项目)。对此可以做些什么?我希望你明白我在这里的意思。

我希望我现在已经完成了所有事情,如果没有,请告诉我。

谢谢!

0 投票
1 回答
1866 浏览

jquery - 如何在 Meteor 框架中安全地使用 jQuery UI 小部件?

jQuery UI 还不是 Meteor 的“包”,即使它最终成为一个“包”,也会有更新的 jQuery 和 jQuery UI 版本,以及其他可能想要与 Meteor 一起使用的 jQuery 插件。会出现各种各样的问题:

  1. 通过标签加载<script>,或者将js文件放在客户端或根目录中?
  2. 如果从 CDN 采购脚本有什么问题吗?最好在本地存储(例如在“公共”目录中)?
  3. 由于$(document).ready()可能在渲染模板之前调用,那么调用通常可能从 .ready() 调用的各种设置函数的最佳位置在哪里?是否应该调用它们Templates.<Name>.rendered,以便如果在模板渲染期间 DOM 发生变化,各种事件处理程序将重新附加到新的 DOM 节点?这是否会导致旧处理程序的内存泄漏,这些处理程序仍然存在以处理已从 DOM 中删除的虚拟节点?
  4. 如果您尝试基于来自 jQuery UI 小部件的事件回调来更改模型数据(并且 Meteor 模板事件本身不支持该事件,例如“click”或“dblclick”),那么识别在回调期间与相关小部件关联的集合数据?您是否应该在 Template..rendered 期间将对象的 _id 加载到 DOM 中,然后在关联的 jQuery UI 事件处理程序期间将其读回?还有其他方法吗?

请注意,根据这个问题,问题自 0.5.0 以来发生了变化,因此一些现有的类似 StackOverflow 问题可能已过时()。

如果一个例子可以帮助你回答,这里是一个工作(?)Meteor 项目,它集成了 jQuery Draggable 和 Droppable: http ://products-jqueryui.meteor.com/ 与Source Here 基于Tutorial Here

(在我的问题中“安全地”,我的意思是不会在 Meteor 框架中造成破坏性错误(或导致 Meteor 破坏 jQuery/jQuery UI),并且尽可能高效:避免过度的 DOM 操作/渲染,过多的客户端/服务器流量,或导致内存泄漏。)

0 投票
1 回答
178 浏览

jquery - 一些 Javascript 在发布时停止工作

所以正如标题所说,我的 Javascript 在发布时停止工作(这是在服务器上)。(这是关于 Draggable/Droppable 的,一个 Droppable 应该只包含一个 Draggable)。

这是我的 Javascript 代码:

好的,所以我使用了这篇文章中的一些解决方案:jQuery UI - Droppable only accept one draggable 有人说:“快速注意:这仅适用于 jQuery 1.6” – Narretz 6 月 4 日 17:21。当我在我发布的版本上运行它时,JQuery 根本不起作用,没有一个对象是可拖动的。

我已经完成的测试 - 将此代码从脚本中取出:

所以至少现在发布版本中的拖放工作,但我仍然想要最大的一个功能。

我的 Javascript 文件是这样引用的:

我的脚本文件在本地和服务器上的那个文件夹中。

所以我的怀疑落到了“jQuery 1.6”上。有人知道这件事吗?

对不起我的文字墙。预先感谢

/里卡德

0 投票
1 回答
269 浏览

jquery - JQuery, Draggable 和 Droppable - 找到一个 Droppable,我得到了 ID

当 Draggable 停止事件正在运行时,我需要找到一个可放置的控件,并且我得到了一个 ID。这可能吗?所以基本上我的想法是这样的:当“out”函数运行时,我存储 dropId。然后,如果要还原项目,我需要将旧的 Droppable 设置为仅接受还原的 Draggable。

这是我的代码的一部分:

我的 itemDrop 函数基本上更新了数据库,并设置了这个: $(this).droppable('option', 'accept', ui.draggable);

这在某种程度上是我在还原项目时所追求的。

希望我有点清楚!如果没有,请告诉我。

谢谢!