Dragging

App.svelte

<script>
	import * as yootils from 'yootils';
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

//	export let name;
	let type     = 'vertical', h, w, size, pos;
	let dragging = false
	let refs = {}

	let table = [ 1, 2, 3, 4]

	// Code adapted from SplitPane in the REPL
	function coordsElt() { return document.getElementById('coords') 	}

	function setPos(event) {
		const { top, left } = refs.container.getBoundingClientRect();
        let x = event.clientX - left, y = event.clientY - top
		console.log('setPos');
		let elt = coordsElt()
		console.log(elt)
		console.log(elt.parentElement)
		elt.style.display = 'block'
		elt.style.left = x + 'px'
		elt.style.top = y  + 'px'
		elt.innerHTML = x + ' ' + y

		

		const px = type === 'vertical' ? y : x
		pos = 100 * px / size;
//		dispatch('change');
	}

	function drag(node, callback) {
		console.log('drag');
		
		const mousedown = event => {
			if (event.which !== 1) return;

			event.preventDefault();

			dragging = true;

			const onmouseup = () => {
		let elt = coordsElt()
		elt.style.display = 'none'

dragging = false;

				window.removeEventListener('mousemove', callback, false);
				window.removeEventListener('mouseup', onmouseup, false);
			};

			window.addEventListener('mousemove', callback, false);
			window.addEventListener('mouseup', onmouseup, false);
		}

		node.addEventListener('mousedown', mousedown, false);

		return {
			destroy() {
				node.removeEventListener('mousedown', onmousedown, false);
			}
		};
	}

	$: side = type === 'horizontal' ? 'left' : 'top';
	$: dimension = type === 'horizontal' ? 'width' : 'height';

</script>




<h3>hi</h3>
<di class="container">
<table  bind:this={refs.container} bind:clientWidth={w} bind:clientHeight={h}>

{#each table as item, i}
<tr>
<td>
{item} {i}
{#if i != table.length -1 }
   <hr use:drag={setPos}/>
{/if}	
</td></tr>

{/each}
</table>
<div id="coords"></div>
</di>
<style>

    .container {
		position: relative;
		display: block;
		border: 1px solid black;
	}
	hr { 
		border-color:red;
		cursor: crosshair
	}
	/* main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	} */

	/* h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	} */

	/* @media (min-width: 640px) {
		main {
			max-width: none;
		}
	} */
	#coords { 
		display: none;
		position: absolute;
		min-height: 1em;
		min-width: 100em;
		overflow: visible;
		color: blue;
		background-color: yellow;
	}
</style>