2024-09-16 12:23:15 +05:30
|
|
|
import React, { createContext, useContext, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
const DragContext = createContext()
|
|
|
|
|
|
|
|
|
|
export const useDragContext = () => useContext(DragContext)
|
|
|
|
|
|
|
|
|
|
// Provider component to wrap around parts of your app that need drag-and-drop functionality
|
|
|
|
|
export const DragProvider = ({ children }) => {
|
|
|
|
|
const [draggedElement, setDraggedElement] = useState(null)
|
2024-09-17 18:32:33 +05:30
|
|
|
const [overElement, setOverElement] = useState(null) // the element the dragged items is over
|
2024-09-16 12:23:15 +05:30
|
|
|
|
|
|
|
|
const onDragStart = (element) => {
|
|
|
|
|
setDraggedElement(element)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onDragEnd = () => {
|
|
|
|
|
setDraggedElement(null)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2024-09-17 18:32:33 +05:30
|
|
|
<DragContext.Provider value={{ draggedElement, overElement, setOverElement, onDragStart, onDragEnd }}>
|
2024-09-16 12:23:15 +05:30
|
|
|
{children}
|
|
|
|
|
</DragContext.Provider>
|
|
|
|
|
)
|
|
|
|
|
}
|