<script>
import DragDrop from "sveltedragdrop"
let people = [
{ name: "Robert Downey" },
{ name: "Chris Evans" },
{ name: "Chris Hemsworth" },
{ name: "Chadwick Boseman" },
{ name: "Chris Pratt" }
]
function reSortHandler(e) {
let newList = e.detail
people = newList
}
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
<style>
.big-black-text{
color: black;
font-weight: 900;
font-size: 3em;
}
</style>
</svelte:head>
<div>
<DragDrop
let:item
list={people}
on:reSort={reSortHandler}
ulStyle="text-center"
liStyle="big-black-text"
>
<h2>{item.name}</h2>
</DragDrop>
</div>