He estado intentando durante 2 días integrar una tabla en Svelte donde puedo seleccionar con mouseDown y arrastrar.
Soy nuevo en js y esbelto e hice algunos cursos. Pero en este momento no me es posible hacerlo funcionar.
Eso es lo que trato de construir en esbelto: TableSelect
Espero que alguien pueda ayudarme.
Muchas gracias, Chris
Resultó un poco más complicado de lo sugerido en mi comentario.
La idea es escuchar los eventos mousedown y mouseup en toda la ventana (a través de <svelte:window> ) para activar o desactivar el estado isDrag , escuchar los eventos mouseenter en las celdas de la tabla y luego activar o desactivar las celdas solo si isDrag está activado. en.
Además, también tendrá que escuchar el evento mousedown en las celdas, en caso de que el arrastre comience dentro de una celda.
El estado activado/desactivado de una sola celda se puede mostrar visualmente con un atributo class:selected .
<script> let columns = new Array(5) // number of columns let rows = new Array(3) // number of rows let state = new Array(rows.length*columns.length).fill(false) let isDrag = false const beginDrag = () => { isDrag = true } const endDrag = () => { isDrag = false } const toggle = (r, c) => { state[r*columns.length+c] = !state[r*columns.length+c] } const mouseHandler = (r, c) => (e) => { if (isDrag || e.type === 'mousedown') { toggle(r, c) } } </script> <style> td { width: 80px; height: 80px; background-color: pink; } .selected { background-color: blue; } </style> <svelte:window on:mousedown={beginDrag} on:mouseup={endDrag} /> <table> {#each rows as _row, r} <tr> {#each columns as _column, c} <td on:mousedown={mouseHandler(r, c)} on:mouseenter={mouseHandler(r, c)} class:selected="{state[r*columns.length+c]}"></td> {/each} </tr> {/each} </table>