通过使用 svelte 拖动选择表格上的单元格答案

【问题标题】：Select Cells On A Table By Dragging with svelte通过使用 svelte 拖动选择表格上的单元格
【发布时间】：2022-01-12 03:38:08
【问题描述】：

我已经尝试了 2 天来将表格集成到苗条中，我可以通过 mouseDown 和拖动进行选择。
我是 js 和苗条的新手，并做了一些课程。但目前我不可能让这个工作。

这就是我尝试在 svelte 中构建的内容： TableSelect

希望任何人都可以帮助我。
非常感谢，克里斯

【问题讨论】：

我认为这只是监听表格单元格上的mousedown 事件并适当地打开或关闭单元格状态的问题。在 Svelte 中，您可以使用 on:mousedown 和 class: 属性相当容易地做到这一点。到目前为止你有什么？

标签： javascript select svelte tablecell

【解决方案1】：

结果比我的评论中建议的要复杂一些。

这个想法是在整个窗口（通过<svelte:window>）上监听mousedown 和mouseup 事件以打开/关闭isDrag 状态，监听表格单元格上的mouseenter 事件，然后切换仅当 isDrag 开启时，单元格才会开启/关闭。

此外，您还必须在单元格上监听 mousedown 事件，以防在单元格内开始拖动。

可以通过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>

Demo REPL

【讨论】：