@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

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