SpreadJS 实现拖拽插入

在SpreadJS中，可以通过shift+拖动整列的方式来移动列，这个方式和Excel是保持一致的。
但是按住shift的操作并不是所有用户都了解，那如何将按shift移动的方式改为直接拖拽移动的方式呢？

在SpreadJS中用户的UI行为都是响应浏览器事件后调用spreadjs内置的command。
拖拽调用的是GC.Spread.Sheets.Commands.dragDrop命令

当我们需要改变行为的时候只需要重写命令的行为即可

1. var oldDragDropExcecte = GC.Spread.Sheets.Commands.dragDrop.execute;
   
2. GC.Spread.Sheets.Commands.dragDrop.execute = function (context, option, isUndo) {
   
3.     if (option.fromRow === -1 || option.fromColumn === -1) {
   
4.         option.insert = true;
   
5.     }
   
6.     oldDragDropExcecte.call(this, context, option, isUndo);
   
7. }

复制代码

在上面代码中，首先判断fromRow或者fromColumn为-1，代表整列或者整行的操作。
将insert直接设置为true，改变一切拖动覆盖的行为。


在线体验地址https://jscodemine.grapecity.com/share/k-qC9p270UytRu6-6503qg/

可以在excute方法里对spread进行判断，决定是否执行后续代码

这个好像是对全局所有spread生效，能否单独对某个spread进行如此设置呢？

求助！！使用setArrayFormula批量设置公式后，拖拽GC.Spread.Sheets.Commands.dragDrop命令执行的逻辑就不生效了。
批量设置公式如下：
const allRows = sheet.getRowCount()
sheet.setArrayFormula(0, 7, allRows, 1, `=F1:F${allRows}+G1:G${allRows}`)

我叫白小飞 发表于 2022-10-28 14:45
求助！！使用setArrayFormula批量设置公式后，拖拽GC.Spread.Sheets.Commands.dragDrop命令执行的逻辑就不 ...

您好，
在教程链接demo的基础上，结合您提供的代码做了测试，未复现您描述的问题，即可以实现拖拽插入。
https://jscodemine.grapecity.com/share/k-qC9p270UytRu6-6503qg/
如下图，您可以实际操作测试下。


如果问题仍未解决，您可以另开新帖并附上可复现的demo，这边再结合代码调研下原因。

Lynn.Dou 发表于 2022-10-28 18:36
您好，
在教程链接demo的基础上，结合您提供的代码做了测试，未复现您描述的问题，即可以实现拖拽插入。 ...

行拖拽移动失效了。你这代码没问题，加了公式后，行拖拽就有问题。你看看。

我叫白小飞 发表于 2022-10-31 10:09
行拖拽移动失效了。你这代码没问题，加了公式后，行拖拽就有问题。你看看。

对于数组公式行拖拽插入的行为是不允许的，这一点也是与Excel一致的，如下图:

SJS提供了InvalidOperation事件，可以通过此事件来对此无效行为做出监听，并给出相应提示。
示例代码如下：

1. sheet.suspendPaint();
   
2. const allRows = sheet.getRowCount()
   
3. sheet.setArrayFormula(0, 7, allRows, 1, `=F1:F${allRows}+G1:G${allRows}`)
   
4. sheet.resumePaint();
   
5. 
   
6. sheet.bind(GC.Spread.Sheets.Events.InvalidOperation, function (e, info) {
   
7.         console.log(info);
   
8. });

复制代码

开启表单保护后，该拖拽方式就失效了，但是按住shift拖拽是可以的

1. sheet.options.isProtected = true
   
2.     sheet.options.protectionOptions = {
   
3.       allowSelectLockedCells: true,
   
4.       allowSelectUnlockedCells: true,
   
5.       allowDragInsertRows: true
   
6.     }

复制代码

表单保护需要对拖拽插入行的按键行为做判断，SpreadJS未暴露相关接口不能直接修改。
对于表单保护的场景，不建议您使用本贴方案，您可以使用ctrl+shift完成拖拽。

这么改，UI上看还是覆盖啊，并不是移动插入的UI，如截图，是按住shift时的UI