Question

我尝试在React中将外部div拖放到fullcalendar来创建事件。

但是React与JQuery UI不兼容，所以我不能使用draggable。

使用react-big-calendar是一个很大的举动，所以我试图寻找是否有更容易的解决方案来使用我过去几年一直在使用的fullcalendar。

我也试过使用react-dnd但是从不调用fullcalendar的drop。

有人有什么建议吗？谢谢。

Answer 1

我遇到了同样的问题。无论出于何种原因，似乎没有关于 react + draggable 事件的任何文档。 fwiw，我把它混在一起，让它在反应和普通 DOM 操作的邪恶结合中像这样工作。这是我的缩写代码。

import React, { useEffect, useState } from 'react'
import { Draggable } from '@fullcalendar/interaction';

...

export default function Sidebar(props: SidebarProps) {
    const { workOrders } = useWorkOrders()
    const [draggableInitialized, setDraggableInitialized] = useState(false)

    useEffect(() => {
        const element = document.getElementById('workOrderContainer')

        if (element && workOrders.length > 0 && !draggableInitialized) {
            setDraggableInitialized(true)

            new Draggable(element, {
                itemSelector: '.draggable-event',
                eventData: (eventElement) => {
                    const workOrderId = eventElement.id

                    return {
                        ... your data here
                    }
                }
            })
        }
    }, [workOrders, draggableInitialized])

    return (
              <span id="workOrderContainer" >
                  {workOrders.map((workOrder) => (
                          <span key={workOrder.id} className="draggable-event" id={String(workOrder.id)} >
                              <WorkOrder key={workOrder.id} title={workOrder.title} />
                          </span>
                      ))}
              </span>
    )
}

在没有Jquery UI的React上使用FullCalendar可拖动外部拖放

1 个答案: