Setup
Dragging Items
DropIt offers a straightforward API to facilitate drag-and-drop functionality for DOM nodes. To implement it, import the drag function and use it as demonstrated below:
<script type="text/javascript">
const { drag } = window.svelteDropit;
let items = [...]; // Your array
const onDrag = () => {
// Callback function when drag-and-drop occurs
// You can add your custom logic here
};
</script>
<ul>
{#each items as item (item.id)}
<li use:drag={{ item, onDrag }}>
<!-- Content of your item -->
<h1>{item.name}</h1>
<p>{item.description}</p>
</li>
{/each}
</ul>
In this example, the drag function from 'svelte-dropit' is employed to enable drag-and-drop functionality for each list item. The onDrag callback function provides a way to execute custom logic when an item is being dragged. This allows for a seamless integration of drag-and-drop behavior into your Svelte components, enhancing user interaction within your application.
Dropping Items
To handle the drop action, use the drop function:
<script>
import { drop } from 'svelte-dropit';
const onDrop = (colName, item) => {
// Callback function when an item is dropped
// You can update the item's column or perform any other action
console.log(item, colName);
};
</script>
<ul use:drop={{ colName: 'yourColName', onDrop }}>
<!-- Droppable area content -->
</ul>
Make sure to replace 'yourColName' with the appropriate column name.