2.0.3 • Published 2 months ago
@fw-components/fw-dnd v2.0.3
Drag and drop list
The fw-dnd component is used to reorder the list of items using drag and drop.
Installation
npm i @fundwave/fw-dnd
Example usage
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>
API
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
list | Array | [] | Array which have all list items |
dragItemRenderer | Function | HTML content render for every item of list |
Methods
dragStart()
Stores drag target element to categories property and set dataTransfer of event
drop()
Handle the reordering of the list Using startContainer and endContainer
Events
@list-updated
Return the reordered list to the parent
2.0.3
2 months ago
2.0.3-formula-editor.1
2 months ago
2.0.3-formula-editor.0
2 months ago
2.0.3-track-multiple-targets.0
3 months ago
2.0.2
4 months ago
2.0.2-trackers.0
4 months ago
2.0.1
9 months ago
2.0.1-custom-tags.5
9 months ago
2.0.1-custom-tags.4
9 months ago
2.0.1-custom-tags.3
9 months ago
2.0.1-custom-tags.2
9 months ago
2.0.1-custom-tags.1
9 months ago
2.0.1-custom-tags.0
9 months ago