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

}

.Handle {

display:block; position:absolute;

width:8px; height:8px;

border:solid 1px black;

background:yellow;

cursor:move;

}

</style>

<script context="module">

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

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

</script>

<script>

let [x0,y0, x1,y1, x2,y2, x3,y3] = [120,160, 180,20, 220,20, 280,160]

function onDragMove_0 (x,y) { x0 = x; y0 = y }

function onDragMove_1 (x,y) { x1 = x; y1 = y }

function onDragMove_2 (x,y) { x2 = x; y2 = y }

function onDragMove_3 (x,y) { x3 = x; y3 = y }

</script>

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

Drag any handle around - dragging should be restricted to the bordered area:

</p>

<div style="