javascript - 从光滑的 slider 将外部事件拖到 FullCalendar

Question

我在我的一个项目中同时使用了 slick slider 和 fullcalendar。完整日历提供了将外部事件拖到日历中的功能，如本 demo. 所示。我无法实现相同的逻辑，因为我的事件在光滑的 slider 内。这是我正在构建的屏幕截图:这是代码:

<div class="menu-wrap">
    <div class="tab-pane gallery container-fluid" id="favorites">
        <div class="row d-none d-md-block gallery_wrapper">
            <div class="w-100 d-none d-md-block heroSlider-fixed">
                <div class="overlay">
                </div>
                <!-- Slider -->
                <div class="slider responsive six">
                    @for($i=1;$i<=12;$i++)
                        @component('components.menu-plan-componant')

                        @endcomponent
                    @endfor

                </div>
                <!-- control arrows -->
                <div class="prev six-prev">
                    <img src="{{URL::to('assets/images/icon/left_direction.svg')}}"
                         class="chevron-basic">
                </div>
                <div class="next six-next">
                    <img src="{{URL::to('assets/images/icon/right_direction.svg')}}"
                         class="chevron-basic">
                </div>
            </div>
        </div>
    </div>
</div>

光滑 slider 的代码:

$('.six').slick({
                    adaptiveHeight: true,
                    prevArrow: $('.six-prev'),
                    nextArrow: $('.six-next'),
                    infinite: false,
                    speed: 300,
                    slidesToShow: 6,
                    slidesToScroll: 6,
                    responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 6,
                                slidesToScroll: 6,
                                infinite: true,
                                dots: true
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                        // You can unslick at a given breakpoint now by adding:
                        // settings: "unslick"
                        // instead of a settings object
                    ]
                });

以及完整日历的代码:

$('#calendar').fullCalendar({
                    droppable: true,
                    defaultView: 'Week',
                    header: false,
                    defaultDate: today,
                    navLinks: false, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',

                    drop: function() {
                        // is the "remove after drop" checkbox checked?
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                        }
                    },


                    eventRender: function (event, element) {
                        element.find(".fc-event-title").remove();
                        element.find(".fc-event-time").remove();
                        var new_description = '#';
                        element.append(new_description);

                    },
                    now: today,
                    footer: {
                        left: 'promptResource',
                        center: '',
                        right: ''
                    },
                    customButtons: {
                        promptResource: {
                            text: '+ add course',
                            click: function () {
                                var title = prompt('Course name');
                                if (title) {
                                    $('#calendar').fullCalendar(
                                        'addResource',
                                        {title: title},
                                        true // scroll to the new resource?
                                    );
                                }
                            }
                        }
                    },
                    views: {
                        Week: {
                            type: 'timeline',
                            duration: {Days: '7'},
                            slotLabelInterval: {hours: 24},
                            slotDuration: {hours: 24},
                        }
                    },
                    resourceLabelText: 'Meal',
                    resourceRender: function (resource, cellEls) {
                        cellEls.on('click', function () {
                            if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
                                $('#calendar').fullCalendar('removeResource', resource);
                            }
                        });
                    },
                    resources: [
                        {id: 'a', title: 'Breakfast', eventColor: 'red'},
                        {id: 'b', title: 'Lunch', eventColor: 'green'},
                        {id: 'c', title: 'Dinner', eventColor: 'orange'},
                        {id: 'd', title: 'Other', eventColor: 'grey'},
                    ],

                    events: [
                        {id: '1', resourceId: 'b', start: today, end: today, title: 'event 1'},
                        {
                            id: '2',
                            resourceId: 'c',
                            start: '2018-04-07T05:00:00',
                            end: '2018-04-07T22:00:00',
                            title: 'event 2'
                        },
                        {id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3'},
                        {
                            id: '4',
                            resourceId: 'e',
                            start: '2018-04-07T03:00:00',
                            end: '2018-04-07T08:00:00',
                            title: 'event 4'
                        },
                        {
                            id: '5',
                            resourceId: 'f',
                            start: '2018-04-07T00:30:00',
                            end: '2018-04-07T02:30:00',
                            title: 'event 5'
                        }
                    ],
                    drop: function() {
                        // is the "remove after drop" checkbox checked?
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove();
                        }
                    }

                });

如何使用灵活的 slider 和完整日历实现事件拖放功能？

更新:如果我使 slick 内部的元素可拖动，它只会应用 slick slider 内部的区域，而不是外部区域。这显示在下面的屏幕截图中:

Answer 1

我设法将 Fullcalendar Demo 扩展为包括 Slick 在内的最小示例。我使用了 setTimeout 来确保 Slick 在进行任何可拖动操作之前已经完成了它的 dom 操作，但我认为 Slick 提供了一些适当的异步事件来告诉你它完成的确切时间(没有检查文档).我认为您可以将这个最小设置应用到您自己的应用程序中。

https://codepen.io/freemanlambda/pen/MXKPBp?editors=1010