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

}

:global(body) { overflow:hidden }

.Handle {

display:inline-block; position:absolute;

top:5px; right:4px; width:20px; height:20px;

cursor:move;

}

</style>

<script context="module">

import DragDropTouch from 'svelte-drag-drop-touch'

import { asDraggable } from 'svelte-drag-and-drop-actions'

</script>

<script>

let DraggableX = 20, DraggableY = 20, DraggableWidth = 100, DraggableHeight = 30

let ArenaWidth = 400, ArenaHeight = 400

function onDragMove (x,y, dx,dy) { DraggableX = x; DraggableY = y }

function onDragEnd (x,y, dx,dy) { DraggableX = x; DraggableY = y }

</script>

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

This example illustrates dragging from a "handle"

</p>

<div style="

width:{ArenaWidth}px; height:{ArenaHeight}px; margin:20px;