@fw-components/fw-dnd

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