<style>
.sortable {
display:flex; position:relative;
width:350px; height:220px; margin:20px;
flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;
align-content:flex-start;
}
.sortable > div {
flex:none; width:80px; height:60px;
margin:1px; padding:5px;
border:solid 1px black; border-radius:4px;
line-height:60px; text-align:center;
cursor:grab;
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
div:global(.ui-sortable-placeholder) {
width:80px; height:60px; margin:1px; padding:5px;
}
</style>
<script context="module">
import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
</script>
<script>
import { sortable } from 'svelte-agnostic-draggable'
/**** map all touch events to mouse events ****/
import mapTouchToMouseFor from 'svelte-touch-to-mouse'
mapTouchToMouseFor('.sortable > div')