<style>
: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;
}
.Note {
display:block; position:absolute;
padding:40px 0px 0px 0px;
border:solid 1px lightgray; background-color:lightyellow;
text-align:center; color:black;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
.Note-Titlebar {
display:block; position:absolute;
left:0px; top:0px; width:100%; height:20px; background-color:palegoldenrod;
cursor:grab;
}
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDraggable } from 'svelte-drag-and-drop-actions'
</script>
<script>
let NoteX = 20, NoteY = 20, NoteWidth = 200, NoteHeight = 120
let ArenaWidth = 400, ArenaHeight = 400
function onDragStart () { return { x:NoteX,y:NoteY } }
function onDragMove (x,y, dx,dy) { NoteX = x; NoteY = y }
function onDragEnd (x,y, dx,dy) { NoteX = x; NoteY = y }
</script>