下載SpreadJS最新試用版

前言 | 問題背景

拖拽操作（Drag&Drop）是網(wǎng)頁應(yīng)用中常見的一種快捷操作，那么如何在SpreadJS中進行此類操作，本文就以一個簡單的示例來說明。

示例說明

此示例演示將頁面中的元素(button)通過拖拽的方式，將按鈕的文字粘貼到 SpreadJS 單元格中。同時可以查看控制臺（console）了解事件過程。

核心代碼：

/* 松開鼠標，觸發(fā) drop */
        document.addEventListener("drop", function (event) {
            // 阻止默認行為（drop的默認處理方式是當初鏈接處理）
            event.preventDefault();
            // 把拖拽元素移入目標區(qū)域
            //這里要經(jīng)過兩步處理
            // 1、先把拖拽元素從原父元素中刪除（這步不是必須的）
            ///2、然后再添加到目標區(qū)域
            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("執(zhí)行完畢 ")
        })

通過SpreadJS 提供的 hitTest方法，很容易找到與之交互的SpreadJS 內(nèi)部對象，接下來就是通過API將button中的Text設(shè)置為單元格的 Value.

Demo下載

購買SpreadJS正版授權(quán)，請點擊“”喲！