score:0

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>
    )
}

Related Query

More Query from same tag