<style>

.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 } from 'svelte-agnostic-draggable'

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

mapTouchToMouseFor('.draggable')

function onDraggableInit () { console.log('Draggable was created') }

function onDragStart () { console.log('dragging started') }

function onDragMove () { console.log('dragging continues') }

function onDragStop () { console.log('dragging was stopped') }

function onDraggableDestroy () { console.log('Draggable was destroyed') }

</script>

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

Drag the green box around - dragging should be restricted to the

bordered area:

</p>

<div style="