jquery - 将溢出添加到 div 会阻止其内容正确拖动

Question

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

从这个例子一切都很好。但是，我有很多外部事件需要拖到日历上，所以我的事件列表需要滚动。

我补充说：

overflow-y: auto;

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

这是发生的事情的 JSfiddle

我已经尝试了尽可能多的 z-index 和溢出组合的组合，当它们离开父级时它们会不断消失。

如何允许父 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'

有关示例，请参见此 Fiddle。

---

如果您需要实际“移动”元素（即它在放置后不会重新出现），remove()则一旦将元素放置在适当的位置，您就需要该元素。您可以在删除原始元素的Droppablereceive的回调中添加一些内容。