2.0.5 • Published 9 months ago
@fw-components/fw-dnd v2.0.5
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.5-ignore-blocks-wo-role.1
9 months ago
2.0.5
9 months ago
2.0.4-fix-match-path-pattern.0
1 year ago
2.0.4
1 year ago
2.0.3
1 year ago
2.0.3-formula-editor.1
1 year ago
2.0.3-formula-editor.0
1 year ago
2.0.3-track-multiple-targets.0
1 year ago
2.0.2
2 years ago
2.0.2-trackers.0
2 years ago
2.0.1
2 years ago
2.0.1-custom-tags.5
2 years ago
2.0.1-custom-tags.4
2 years ago
2.0.1-custom-tags.3
2 years ago
2.0.1-custom-tags.2
2 years ago
2.0.1-custom-tags.1
2 years ago
2.0.1-custom-tags.0
2 years ago