2

就像在我的小提琴http://jsfiddle.net/meridius/95Wej/中一样，我有一些元素（draggables）我想以编程方式（仅通过代码，没有用户交互）移动到它们相应的 droppables。这是我能做到的。

我不知道为什么 .droppable("drop") 事件没有触发。
我需要 droppable 来注册它有可拖动的。否则（在我更复杂的设置中）当用户移动可拖动时会出现一些奇怪的行为。

我试图在之后.trigger("mousemove"), mousedown重新初始化，但这些都没有帮助。.droppable().position()

编辑：
“奇怪”行为是由维护引起的position:relative;，我通过在调用之前将其设置为 absolute 解决了这个问题.position()。
然而，关于为什么事件没有被触发的问题仍然存在。

4

2 回答 2

2

s 上的drop事件处理程序droppable有点奇怪。如果您使用dropdroppable事件的事件处理程序初始化 ，如下所示：

$('div.droppable').droppable({drop: dropFn});

ThendropFn是唯一在元素被拖放到时调用的函数，droppable并且您不能仅使用该.trigger方法调用它。相反，您需要做的是在droppable没有事件处理程序的情况下为 drop 函数初始化，然后稍后为drop事件绑定事件处理程序，如下所示：

$('div.droppable').droppable().on('drop', dropFn);

用户发起的放置不会受到影响，但现在您可以在代码中触发放置事件。当您这样做时，您必须提供此处ui描述的对象的替代品，如下所示：

$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...});

我通过将draggable的droppable位置设置droppable为“相对”，动态地（使用对 的调用.css）将以下 CSS 设置为以下内容draggable来实现将

div.draggable {
    position: absolute;
    left:     0;
    top:      0;
}

然后分离并附draggable加到droppable：

$('div.draggable').first().detach().appendTo($('div.droppable').first());

这个答案帮助了我：https ://stackoverflow.com/a/21279352/1852838 。

在我的示例中，我总是使用第一个draggable，droppable但您应该能够轻松地将其调整为您的特定应用程序。

于 2014-10-30T22:46:25.783 回答
0

它不会开火，因为您没有在那里掉落和元素。您正在使用.positionjquery 的功能将可拖动对象移动到可放置对象中。所以你的目标是使用移动函数的回调。

$(this).position({
  of: "." + $(this).data("target")
}, function(){
  //do some stuff
});

因为你在一个.each循环中，所以这个回调函数会被多次触发。

于 2013-11-04T15:27:12.897 回答