<style>
div {
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
}
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import Conversion from 'svelte-coordinate-conversion'
</script>
<script>
let Arena, DragImage
let X = 20, DeltaX; const minX = 0, maxX = 400-80
let Y = 20, DeltaY; const minY = 0, maxY = 400-30
let PositioningWasDelayed = false // workaround for problem with "drag" events
function startDragging (Event) {
let TargetBox = Event.target.getBoundingClientRect()
DeltaX = Event.pageX - TargetBox.left-window.scrollX
DeltaY = Event.pageY - TargetBox.top-window.scrollY
PositioningWasDelayed = false
DragImage = document.createElement('div') // width/height must be > 0!
DragImage.setAttribute(
'style','display:block; position:absolute; width:1px; height:1px'
)
document.body.appendChild(DragImage)
Event.dataTransfer.setDragImage(DragImage, 0,0)
Event.dataTransfer.effectAllowed = 'move'
}
function continueDragging (Event) {
if ((Event.screenX === 0) && (Event.screenY === 0) && ! PositioningWasDelayed) {
PositioningWasDelayed = true // last "drag" event contains wrong coord.s