: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 x1 = 20, y1 = 30

let x2 = 200, y2 = 50

function onDragStart_1 () { return { x:x1,y:y1 } }

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

function onDragEnd_1 (x,y, dx,dy) { x1 = x; y1 = y }

function onDragStart_2 () { return { x:x2,y:y2 } }

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

function onDragEnd_2 (x,y, dx,dy) { x2 = x; y2 = y }

</script>

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

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