The fw-dnd component is used to reorder the list of items using drag and drop.
npm i @fundwave/fw-dnd
const dragList = [{ name:"Aayush", company:"Fundwave" }, { name:"Isha Sharma", company:"Fundwave" }]
<fw-dnd
.list=${dragList}
@list-updated=${updateList}
.dragItemRenderer=${ (item) => html `<p>${item.name}</p>` }
></fw-dnd>
Name | Type | Default | Description |
---|---|---|---|
list | Array | [] | Array which have all list items |
dragItemRenderer | Function | HTML content render for every item of list |
Stores drag target element to categories property and set dataTransfer of event
Handle the reordering of the list Using startContainer and endContainer
Return the reordered list to the parent