<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;
}
.Handle {
display:block; position:absolute;
width:8px; height:8px;
border:solid 1px black;
background:yellow;
cursor:move;
}
.Handle:global(.ui-draggable-helper) { visibility:hidden }
</style>
<script>
import { draggable } from 'svelte-agnostic-draggable'
let [x0,y0, x1,y1, x2,y2, x3,y3] = [120,160, 180,20, 220,20, 280,160]
/**** map all touch events to mouse events ****/
import mapTouchToMouseFor from 'svelte-touch-to-mouse'
mapTouchToMouseFor('.draggable')
/**** Svelte Event Handling ****/
function onDragMove_0 (Event) {
x0 = Event.detail.position.left+5
y0 = Event.detail.position.top +5
}
function onDragMove_1 (Event) {