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

收藏

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

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

过程：
实现代码如下

// 设置浮动元素
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject('f1');
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
var div = document.createElement('div');
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>";
div.style.background = 'gray';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
// 设置区域背景色
sheet.getRange(0, 0, 10+5, 10+5, GC.Spread.Sheets.SheetArea.viewport).backColor("yellow");
sheet.bind(GC.Spread.Sheets.Events.FloatingObjectChanged, function (e, info) {
console.log(sheet.floatingObjects.all()[0].x());
console.log(sheet.floatingObjects.all()[0].y());
var x = sheet.floatingObjects.all()[0].x();
var y = sheet.floatingObjects.all()[0].y();
var rangeX = sheet.getColumnWidth(0)*10;
var rangeY = sheet.getRowHeight(0)*10;
// 限制单元格区域为10行、10列
if(x > rangeX) {
sheet.floatingObjects.all()[0].x(rangeX);
} else if(y > rangeY ) {
sheet.floatingObjects.all()[0].y(rangeY);
}
});

复制代码

实现效果如下动图所示：

完整demo请参考附件。

		自动登录	找回密码
密码			立即注册

0 个回复