<style>
:global([draggable]) {
-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;
}
.DropZone { border:solid 4px transparent }
.DropZone:global(.hovered) { border:solid 4px gold }
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDroppable, asDropZone } from 'svelte-drag-and-drop-actions'
</script>
<script>
function onDropped (x,y, Operation, TypeTransferred, DataTransferred, DropZoneExtras, DroppableExtras) {
console.log('Droppable.onDropped:')
console.log(' x,y: ',x,y)
console.log(' Operation: ',Operation)
console.log(' TypeTransferred:',TypeTransferred)
console.log(' DataTransferred:',DataTransferred)
console.log(' DropZoneExtras: ',DropZoneExtras)
console.log(' DroppableExtras:',DroppableExtras)
}
function onDrop (x,y, Operation, DataOffered, DroppableExtras, DropZoneExtras) {
console.log('DropZone.onDrop:')
console.log(' x,y: ',x,y)
console.log(' Operation: ',Operation)
console.log(' DataOffered: ',DataOffered)
console.log(' DroppableExtras:',DroppableExtras)
console.log(' DropZoneExtras: ',DropZoneExtras)
let TypeAccepted = undefined