问题标签 [jquery-draggable]

我正在使用 jquery UI 和 jQuery draggable，我所有的可拖动对象都使用 jquery克隆助手并将可拖动对象附加到droppable。

这是我的代码

我正在设置克隆的位置.css('top', ui.absolutePosition.top);，css('left', ui.absolutePosition.left);但该位置是相对于身体的。

该位置与 droppable 无关，这使得可拖动拖放到随机位置。总的来说，可拖放和可拖动的集成并不紧密。我想让它更顺畅。

是否可以使用基本的 jQuery 脚本（不使用 jQuery UI）实现拖放？

我正在尝试使用.draggable()通过 Meteor 订阅填充的 jQuery UI 创建一组可拖动的 DOM 对象。我想出的代码看起来像

这些与一些Meteor.publish()调用相对应，因此任何时候集合发生变化，.draggable()行为都会被附加。至少，这是我的意图。

然而，它只能工作一次——一旦其中一个<li>被拖放，那么它们就不再是可拖动的了。

当对象被删除时，我正在触发一个附加到Template项目的自定义事件，如下所示

因此，我的想法是，对 drop 集合的这种更改应该通过 pub/sub 进程传播并重新运行.draggable()上面的行。但它似乎没有。

可以在此处查看完整代码https://github.com/sbeam/in-out/blob/master/client/inout.js并且该应用程序位于http://inout.meteor.com/（那里其他一些可能与项目随机丢失值或完全从 UI 中消失的问题无关）

因此，如果我对 Meteor 中 pub/sub 如何工作的理解不正确，那么很高兴知道。或者有没有更有效的方法来实现没有它的 UI 行为绑定？

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

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 操作/渲染，过多的客户端/服务器流量，或导致内存泄漏。）

所以正如标题所说，我的 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”上。有人知道这件事吗？

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

/里卡德

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

这是我的代码的一部分：

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

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

希望我有点清楚！如果没有，请告诉我。

谢谢！

一旦用户开始拖动某些东西，我就会尝试更改一些 css，但还没有找到一种简单的方法来做到这一点。

现在我使用 mousedown 和 mouseon，唯一的问题是 mousedown 的行为与 click() 完全相同，但 id 就像用户拖动元素后要执行的函数，而不是在单击它时立即执行的函数。

应该有一个简单的方法来做到这一点，但我还没有找到任何。是否有一个特殊的 jquery 事件？

我怎么能这样做，所以它适用于所有浏览器？

这是我的应用程序：

http://jsbin.com/ucopun/97/edit

相关代码：

我的 CanvasModel 有以下视图，用户可以在其上从工具栏中拖放各种小部件。每当将某些内容放入 CanvasView 时，都会将一个新的 WidgetView 实例附加到 DOM 中。

最近添加的 Widget 也是可拖动的，以便用户将其放置在 Canvas 中他想要的任何位置。问题是，一旦最近附加的 Widget 被删除，另一个 WidgetView 实例就会被附加

我只想实例化一个从工具栏拖到画布的小部件（它们有一个“拖拽”类）。有没有办法“过滤”放置侦听器，所以 CanvasView 仅当放置的项目具有“拖动”类或已从工具栏拖动时才会实例化一个小部件？

我有一些可拖动的项目（#draggable li），我将它们拖放到可排序的（#sortable）中。

sortable 被两个 div 包裹，最外层的 div 有 overflow-y: 滚动。拖放机制工作正常，直到可排序列表展开和滚动。

当我尝试将一个项目拖放到可排序对象上时，我无法让可排序滚动条以我想要的方式自动滚动（比如想要上移到第一个元素之上或下移到下面最后一个元素）。但是当我尝试在它们之间拖动和排序项目时，滚动条会在拖动时自动滚动。

是错误还是我的代码工作方式有问题。

这是完整的代码：

//CSS

//JS

小提琴演示http://jsfiddle.net/8KDJK/21/

任何帮助将不胜感激。谢谢 ：）