前言 | 问题背景
拖拽操作(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.