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