/3dd

Primary LanguageJavaScript

Explain how to implement independetn drag and drop on each page in React.

Use array splice() method to remove the dragged item from its original position in the sortedProducts array and assign it to the draggedProduct variable. The dragItem.current is the index of the dragged item on the current page.

const [draggedProduct] = sortedProducts.splice((currentPage - 1) * productsPerPage + dragItem.current, 1);

Use array splice() method again to insert the draggedProduct at the new position in the sortedProducts array. The dragOverItem.current is the index of the item where the dragged item is dropped on the current page.

sortedProducts.splice((currentPage - 1) * productsPerPage + dragOverItem.current, 0, draggedProduct);