限制浮动对象在单元格区域内拖动

背景：
客户希望将自定义浮动对象限制在某一单元格区域内拖动，请问如何实现呢？

思路：
监听FloatingObjectChanged事件，当拖动位置超过单元格区域时，强制拖回区域边缘位置。

过程：
实现代码如下

1. // 设置浮动元素
   
2.             var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1');
   
3.             customFloatingObject.startRow(1);
   
4.             customFloatingObject.startColumn(1);
   
5.             customFloatingObject.endColumn(6);
   
6.             customFloatingObject.endRow(6);
   
7.             var div = document.createElement('div');
   
8.             div.innerHTML = "<span>SpreadJS supports FloatingObject.</span><div style='border: 1px dotted red; width: 80%; margin:auto;'><ul><li>I am list one.</li><li>I am list two.</li><li>I am list three.</li></ul></div>";
   
9.             div.style.background = 'gray';
   
10.             customFloatingObject.content(div);
    
11.             sheet.floatingObjects.add(customFloatingObject);
    
12. 
    
13.             // 设置区域背景色
    
14.             sheet.getRange(0, 0, 10+5, 10+5, GC.Spread.Sheets.SheetArea.viewport).backColor("yellow");
    
15.             
    
16.             sheet.bind(GC.Spread.Sheets.Events.FloatingObjectChanged, function (e, info) {
    
17.                 console.log(sheet.floatingObjects.all()[0].x());
    
18.                 console.log(sheet.floatingObjects.all()[0].y());
    
19.                 var x = sheet.floatingObjects.all()[0].x();
    
20.                 var y = sheet.floatingObjects.all()[0].y();
    
21.                 var rangeX = sheet.getColumnWidth(0)*10;
    
22.                 var rangeY = sheet.getRowHeight(0)*10;
    
23.                 // 限制单元格区域为10行、10列
    
24.                 if(x > rangeX) {
    
25.                         sheet.floatingObjects.all()[0].x(rangeX);
    
26.                 } else if(y > rangeY ) {
    
27.                         sheet.floatingObjects.all()[0].y(rangeY);
    
28.                 }
    
29.             });

复制代码

实现效果如下动图所示：

完整demo请参考附件。