V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

在 SpreadJS 中进行拖拽(Drag&Drop)的简单示例

  •  
  •   powertoolsteam · 2019-03-28 08:57:59 +08:00 · 1126 次点击
    这是一个创建于 2069 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言 | 问题背景

    拖拽操作( 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 数据开发,备受华为、中通、民航飞行学院等国内知名企业客户青睐。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1008 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:49 · PVG 05:49 · LAX 13:49 · JFK 16:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.