问题标签 [jquery-draggable]

我正在使用 jquery ui 可拖动，最终可放置，以便将图片重新排序到不同的框中。

当我将图片拖出框时，一旦它离开其直接容器，它就会出现在所有其他元素的下方。

在谷歌搜索时，我发现添加：

这使得被拖动的内容出现在所有元素的顶部，但它仍将原始副本留在框中，我不希望这样。

有没有办法让元素在被拖动时保持在所有内容之上？我尝试了高 z-index 无济于事。

这是一个 jsfiddle，它显示了第二个后面的第一个拖动元素。反过来，这不是问题。我无法在不破坏很多其他东西的情况下更改包含 div 的相对位置。

http://jsfiddle.net/cBWhX/6/

我在 Angular 中使用这个插件。在文档中它说

将要调用的 onDrop 回调方法将可拖动对象拖放到可放置对象中

所以我尝试像这样使用它（相关部分是onDrop="myCallback"）：

并在作用域上定义函数，如下所示：

http://plnkr.co/edit/kiYrIU?p=preview

正如您从 Plunker 看到的那样，这不起作用，由于某种原因找不到回调函数（它可能不在范围内？）。

我已经尝试过多种变体，例如onDrop="myCallback(event, ui)"等等onDrop="myCallback"。这些都不起作用。

这是一个错误还是我只是没有正确使用它？

提前致谢。

我对 JavaScript 和 JQuery 很陌生，希望你能帮助我解决我的问题。

我想在几个较小的 tr 上放置一个 div 并获得 div 覆盖的最高的一个。但似乎JQuery选择了div中心的tr。

有没有更简单的方法可以在不使用 div 的高度来计算顶部 tr 的情况下实现这一点？

也许我只是做错了什么或错过了什么。

HTML：

查询：

作为jsfiddle

提前致谢！

从阅读几个简单的问题看来，我的问题可能是一个 DOM 元素不能有多个 JQuery UI Droppable范围。我想知道是否有人可以确认这一点，或者提出解决方法？

例如，我有两个要拖放到列表中的可拖动对象：

有没有一种方法可以根据将哪个元素拖到列表中来分配两个不同的结果（在这个例子中这很简单，但在现实生活中我有一组更复杂的列表和元素）？

在这个例子中，我有：

但只能drag1移动到列表中，导致第二个警报被触发。

似乎使用范围只会导致拖放之间的冲突并且不能按我预期的那样工作......如果它不能像这样工作那么scope参数的目的是什么？

这是我的例子的小提琴；非常感谢任何帮助： Fiddle here

这个问题很不言自明。我可以使用“snapMode:'inner'”将它捕捉到 div 的所有侧面，而不仅仅是顶部。谁能想到解决方法？

http://jsfiddle.net/ZbeJL/2/

我正在尝试使可拖动的多个项目只能拖动到 1 个可放置项。如果放在可放置对象之外，则还原。我的大部分代码都有效，除了一个错误：

用户将项目拖到可放置项中。然后拖出（执行 out 函数），然后他未能放入 droppable （还原发生，拖动回到其先前的 droppable）。实际发生的是，droppable 现在可以接受任何拖动（因为拖动离开，执行结束），而拖动由于恢复而从未真正离开。

我已经尝试解决这个问题几个小时并通过了 API。我什至尝试使用回调函数进行还原，但是由于对如何检索可拖动的可放置对象感到困惑，我被卡住了。

jsfiddle：http: //jsfiddle.net/tG6cj/

我是一个 jQuery 新手，但我试图模拟一个lightbox页面上可能存在多个图像的位置，并且我有“浮动”放置区，用户可以将图像拖放到放置区，然后添加到灯箱。

灯箱由一个包含两行和 4 个单元格的表格组成，每个单元格内都有 div，它们是 dropzones。

我打算使用表格/单元格来调整图像的顺序（将通过 AJAX 保存（除其他外）到服务器。）

我实际上已经通过快照使图像居中，但我需要div静态定位要包含的图像。也许还有另一种解决方案，但是在每种情况下，当我省略将位置/静态添加到可拖动对象时，它不会将其定位在容器div或表格单元格中：

拖入放置区的图像可以拖动到新的放置区，但是第二次拖动的图像不会显示图像，或者div仍然会正确放置。如果我删除"$(this).append(ui.draggable.css('position', 'static'))" 第二次拖动可以正常工作，但它不包含在 Dropbox 中。

这是小提琴：小提琴

我正在尝试开发具有以下功能的页面：

页面将有两列：一列是#origin（左列），包含一个矩形列表（代表变量），第二列是#drop（右列），包含可以放置矩形的输入。

为了得到我想要的结果，我想到了使用两个插件：jquery ui draggable和jQuery Tokeninput

问题是，一旦我将一个矩形（<li>）放入输入字段中，我该如何做到这一点，它会显示为一个标签。使用相同的<li>元素也可以，只要我可以在输入中输入更多文本（以完成公式），如果稍后用户改变主意并决定变量（标签）不是他或者她想要，页面应该允许他们删除标签（通过单击右上角的“X”或将标签返回到左列的原始位置）

有人已经做过类似的事情并且可以给我一些指导吗？或者有人对此有其他想法？

任何帮助是极大的赞赏。

PS如果您知道任何其他可以在同一输入中组合文本和标签的标记插件，请告诉我。

Background

I am building a meteor application where I save objects positions and sizes for a corresponding div. When this page is accessed again, I recreate all the divs and re-populated the objects size and positions appropriately. I am re-populating the divs and corresponding objects then calling jQuery $().draggable() inside a Template.[name].rendered.

Problem

When I try to drag objects in the first Div the position (left, top) values becomes some negative value. It only happens to objects in the first Div I add to the DOM. When I remove the containment parameter for draggable it doesn't get the negative positions anymore, but it is also no longer contained.

Please help me figure out how I could deal with this odd behavior. Thanks

假设我有两个放置区，一个在另一个下方，并且我有一个可拖动元素，其高度等于放置区的高度和它们之间的间距之和。当我将元素拖到两个区域上并释放鼠标时，元素会附加到底部放置区域而不是顶部放置区域。我需要做的是，如果我将元素放在两个区域上，我希望元素落入第一个区域而不是第二个区域。

这是我到目前为止所尝试的。

小提琴

这是脚本

有人可以帮我吗。

编辑：可能有多个像这样堆叠的放置区。就像一个 3x3 网格。在每种情况下，顶部放置区应该是应该接受放置的放置区，而不是底部放置区。例如，如果我将鼠标悬停在第 1 列 => 第 1 行和第 2 行上，则 col1 row1 应该是 dropzone。如果我将鼠标悬停在 column 1 => row 2 和 row 3 上，则 col1 row2 应该是 dropzone。

这是我们正在尝试开发的游戏。拖放应该按照我在问题中发布的方式进行。