在SpreadJS中进行拖拽（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正版授权，请点击“咨询在线客服”哟！

标签：表格控件Spread