.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;

}

</style>

<script>

import { draggable, droppable } from 'svelte-agnostic-draggable'

function onDroppableInit () { console.log('Droppable was created') }

function onDroppableActivate () { console.log('Droppable was activated') }

function onDroppableOver () { console.log('Draggable entered Droppable') }

function onDroppableDrop () { console.log('Draggable was dropped') }

function onDroppableOut () { console.log('Draggable left Droppable') }

function onDroppableDeactivate () { console.log('Droppable was deactivated') }

function onDroppableDestroy () { console.log('Droppable was destroyed') }

/**** map all touch events to mouse events ****/

import mapTouchToMouseFor from 'svelte-touch-to-mouse'

mapTouchToMouseFor('.draggable')

</script>

<p style="line-height:150%">

Drag circle, triangle and star to where they belong:

</p>

<div style="

">

<div class="draggable" style="