Question

我正在使用jquery FullCalendar插件，我正在向日历中添加外部事件。

从this example开始，一切都很完美。但是，我需要将很多外部事件拖到日历上，所以我的事件列表需要滚动。

我补充说：

overflow-y: auto;

到父div，它允许它滚动。但是，当它们被拖到父div之外时，事件就会消失。

Here is a JSfiddle of what happens

我尽可能多地尝试了z-index和overflow组合的组合，并且当它们离开父级时它们会一直消失。

如何允许父div滚动并阻止事件项在拖动时消失？

Answer 1

如果这是您Draggable的初始化：

$(this).draggable({
    zIndex: 999,
    revert: true, // will cause the event to go back to its
    revertDuration: 0, //  original position after the drag
    scroll: false,
    //INSERT HERE
});

然后在//INSERT HERE行插入以下选项之一：

选项1

    helper: 'clone',
    appendTo: 'body'

这将按照需要工作，但拖动时会克隆拖动的元素。

为避免这种情况，请使用下一个选项：

选项2

    helper: function(event, ui) {
        var clone = $(this).clone();
        $(this).css({opacity:0}); //or $(this).hide()
        return clone;
    },
    stop: function(event, ui) {
        $(this).css({opacity:1}); //or $(this).show()
    },
    appendTo: 'body'

See this Fiddle for an example

如果你需要实际“移动”元素（即放下它后它不再出现），一旦它被放在适当的位置，你需要remove()元素。您可以在删除原始元素的Droppable的receive回调中添加内容。

向div添加溢出会阻止其内容正确拖动

1 个答案:

选项1

选项2