Drag Container (fw-drag-container)

fw-drag-container can be used to reorder a list items via drag and drop or move/copy items between two fw-drag-container elements.

Demo

fw-drag-container is a custom component with an open shadow that acts as a wrapper to the list items having draggable attribute as true, that can be dragged and dropped with in the wrapper to change their order.

Item 1 Item 2 Item 3 Item 4
Item 1 Item 2 Item 3 Item 4 Item 5

Show Code

Demo for dragging items from one container to another container.

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9

Show Code

fwDrop event will be emitted during a successful drop event, and can be used to detect the dropped item.

Item 1 Item 2 Item 3 Item 4 Item 5

Show Code

var drop = document.getElementById('drop');
drop.addEventListener('fwDrop', (e) => {
  console.log(e.detail);
});

Properties

Property	Attribute	Description	Type	Default
acceptFrom	accept-from	Id of the fw-sortable element from which draggable content can be accepted. Add comma separated id's for multiple containers.	string	''
addOnDrop	add-on-drop	Whether the drag element should be added to the container on drop. If set to false, the placeholder will be retained.	boolean	true
copy	copy	Whether the drag element should be moved or copied.	boolean	true
placeholderClass	placeholder-class	The class name for the drag/drop placeholder. Add space separated class names for multiple classes	string	''
sortable	sortable	Whether the list should be sortable.	boolean	true

Events

Event	Description	Type
fwDrop	Triggered when an draggable item is dropped inside the container.	CustomEvent<void>

Dependencies

Used by

• fw-data-table

Graph

graph TD;
  fw-data-table --> fw-drag-container
  style fw-drag-container fill:#f9f,stroke:#333,stroke-width:4px

---

Built with ❤ at Freshworks