在 SpreadJS 中进行拖拽（Drag&Drop）的简单示例

前言 | 问题背景

拖拽操作（ Drag&Drop ）是网页应用中常见的一种快捷操作，那么如何在 SpreadJS 中进行此类操作，本文就以一个简单的示例来说明。

示例说明

此示例演示将页面中的元素(button)通过拖拽的方式，将按钮的文字粘贴到 SpreadJS 单元格中。同时可以查看控制台（ console ）了解事件过程。

核心代码：

/* 松开鼠标，触发 drop */
        document.addEventListener("drop", function (event) {
            // 阻止默认行为（ drop 的默认处理方式是当初链接处理）
            event.preventDefault();
            // 把拖拽元素移入目标区域
            //这里要经过两步处理
            // 1、先把拖拽元素从原父元素中删除（这步不是必须的）
            ///2、然后再添加到目标区域
            if (event.target.className == "dropzone") {
                event.target.style.background = "";
                dragged.parentNode.removeChild(dragged);
                event.target.appendChild(dragged);
            }
            //获取拖动物理在屏幕的位置
            var offsetL = document.getElementById("ss").offsetLeft;
            var offsetT = document.getElementById("ss").offsetTop;
            //获取拖动块的值
            var tab_value = document.getElementById("item1").innerText
            console.log(tab_value)
            var x = event.pageX - offsetL;
            var y = event.pageY - offsetT;
            //获取单元格的位置
            var target = spread.hitTest(x, y);
            console.log(target)
            console.log("列： " + target.worksheetHitInfo.col + "行: " + target.worksheetHitInfo.row);
            var sheet = spread.getActiveSheet();
            sheet.setValue(target.worksheetHitInfo.row, target.worksheetHitInfo.col, tab_value);

            console.log("执行完毕 ")
        })

通过 SpreadJS 提供的 hitTest 方法，很容易找到与之交互的 SpreadJS 内部对象，接下来就是通过 API 将 button 中的 Text 设置为单元格的 Value.

Demo 下载

SpreadJS | 下载试用

纯前端表格控件 SpreadJS，是市面上布局与功能都与 Excel 高度类似的一款表格控件，全中文操作界面，适用于.NET 、Java、移动端等多个平台的类 Excel 数据开发，备受华为、中通、民航飞行学院等国内知名企业客户青睐。