Card.js - the item that is being dragged from one column to another. Element with green background.
Board.js - contains the states on which the card is being dropped. Element with blue-ish background
Steps:
In Card.js
Make the card draggable by setting draggable attribute on the card to true.
Store the data of the element in an attribute.
Set an onDragStart listener on the card and once it is started, take the card data (from the attribute) and set it to dataTransfer object of the event using setData function of dataTransfer.
const handleOnDrop = (ev) => {
const dropTarget = ev.target.closest(".dropTarget");
const droppedState = dropTarget.getAttribute("data_state");
const draggedItemData = JSON.parse(ev.dataTransfer.getData("draggedItemData"));
const currentItemState = draggedItemData.state;
if (droppedState !== null && currentItemState !== droppedState) {
// Update the state of the dragged item if its dropped on a different column.
updateCardStatus(draggedItemData, droppedState);
}
};
Top comments (0)