如何阻止这种情况？使用完整日历拖放 + jquery ui 对话框（具有拖放功能）答案

【问题标题】：How to stop this? Using Full Calendar drag and drop + jquery ui dialog(that has drag and drop)如何阻止这种情况？使用完整日历拖放 + jquery ui 对话框（具有拖放功能）
【发布时间】：2011-07-22 20:53:34
【问题描述】：

我在 jquery ui 对话框中使用 full calendar 。

所以基本上这就是发生的事情。我有一些可拖动的事件，用户可以将它们拖到他们的日历上。一旦在他们的日历上，他们可以单击该事件以加载一个对话框进行编辑。

这是一个可拖动的 jquery ui 对话框。现在我发现，如果我移动 jquery 对话框（这个对话框就在日历的正上方），它将尝试将自己挂接到日历。发生这种情况时，我会触发一个 ajax 请求，以保存可拖动事件所在的位置。

当然，因为这不是我期望的请求失败和崩溃的那种事件。

关于如何阻止这种情况的任何想法？

这是我修改的示例文件，以显示正在发生的事情。

http://jsfiddle.net/Jaybles/dmqXv/

将对话框拖放到日历上。

【问题讨论】：

仅供参考 - 这是一个有效的 JSFiddle 来演示该行为。 jsfiddle.net/Jaybles/dmqXv。出于某种原因，对话框会在屏幕底部弹出。
@Dutchie432 - 您必须将对话框拖到日历上，然后您会看到我的意思正在发生。我知道 JSFiddle，但 fullcalendar 没有托管在任何地方，所以我无法（据我所知）将这些脚本放在上面。
但看来你知道已经给我看了。甚至没有想到只使用作者网站上的它来将其用作 CDN。

标签： jquery drag-and-drop dialog fullcalendar draggable

【解决方案1】：

不幸的是，John 的解决方案不会阻止将 jquery 对话框拖放到日历上。更好更简单的解决方案是使用 FullCalendar 选项“dropAccept”。

如 FullCalendar“删除外部元素”示例所示，FullCalendar 将可拖动事件框中的事件以及任何打开的 jquery 对话框视为外部事件。

确保只有可拖动事件框中的外部事件被标记为“.external-event”等类，并将“dropAccept”选项和“.external-event”类名添加到 FullCalendar 初始化，当您拖放打开的 jquery 对话框时，将不会触发 FullCalendar 放置选项。

$('#calendar').fullCalendar({
dropAccept: '.external-event',
drop: function() {
}
});

当然，您必须确保不要使用相同的类名标记 jquery 对话框。

日历上已有的事件不受影响，因为它们不被视为外部事件。

【讨论】：

【解决方案2】：

我知道这很旧，但我也有这个问题（除了我刚刚从屏幕上删除），因为我使用了完整日历中的相同代码，为您删除了事件。基本上，您只需将放置代码包装在 if 语句中，以便它仅针对某些事情执行。是的，我知道这很简单，但由于某种原因，我认为 drop 函数从屏幕上删除了 this 元素，但完整日历附带的代码并没有这样做，这对我来说是个问题。

drop: function(date, allDay) { // this function is called when something is dropped
    if($(this).hasClass("external-event")) {
        // add all existing drop code here
    }
}

这应该会阻止日历采用 jquery ui 可拖动模式，以及除了具有外部事件类的所有其他可拖动模式。

【讨论】：