在没有 Jquery UI 的情况下在 React 上使用 FullCalendar 可拖动以进行外部拖放答案

【问题标题】：Using FullCalendar on React without Jquery UI Draggable for external drag drop在没有 Jquery UI 的情况下在 React 上使用 FullCalendar 可拖动以进行外部拖放
【发布时间】：2023-03-02 21:35:01
【问题描述】：

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

但是 React 与 JQuery UI 不兼容，所以我不能使用可拖动的。

使用 react-big-calendar 是一个大动作，所以我尝试寻找是否有更简单的解决方案来使用我过去几年一直在使用的 fullcalendar。

我也尝试使用 react-dnd，但从未调用过完整日历的 drop。

有人有建议吗？谢谢。

【问题讨论】：

您好，欢迎来到 stackoverflow。目前很难从你的问题中看出你到底尝试了什么。理想情况下，您以Minimal, Complete, and Verifiable example 的形式展示您的努力，因为这使其他人更容易复制并随后（希望）解决您的问题。
感谢您的及时回复 Erik =)。我关注了codepen.io/kotazi/pen/KVoXob，但它说可拖动不是一个函数。然后我按照这个github.com/react-dnd/react-dnd/tree/master/examples/… 将 fullcalendar 包装在目标中，但从不调用 fullcalendar.drop 事件。这有意义吗？
您是否正在导入日历，例如 import FullCalendar from '@fullcalendar/react'

标签： reactjs fullcalendar

【解决方案1】：

我遇到了同样的问题。无论出于何种原因，似乎没有任何关于反应 + 可拖动事件的文档。 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>
    )
}

【讨论】：