概述
本 Demo 展示了浮动对象的交互操作功能。通过创建包含图片的浮动对象，演示了浮动对象支持的鼠标和键盘操作方式。
实现思路
创建 Workbook 实例并获取活动工作表
创建 3 个 FloatingObject 实例，设置名称和位置
为每个浮动对象创建 img 元素并设置为内容
使用 floatingObjects.add() 方法将浮动对象添加到工作表
用户可以通过鼠标和键盘与浮动对象进行交互
代码解析
创建浮动对象
这段代码创建了一个浮动对象。FloatingObject 构造函数接收 5 个参数：name（名称）、x（水平位置）、y（垂直位置）、width（宽度）、height（高度）。然后创建一个 img 元素，通过 content() 方法设置为浮动对象的内容，最后使用 add() 方法将浮动对象添加到工作表。
运行效果
键盘操作
Esc：取消选择所有浮动对象
Delete：删除选中的浮动对象
Tab：选择下一个浮动对象
Shift+Tab：选择上一个浮动对象
Ctrl+X：剪切选中的浮动对象
Ctrl+C：复制选中的浮动对象
Ctrl+V：粘贴浮动对象
Ctrl+A：选择所有浮动对象
方向键：移动选中的浮动对象
鼠标操作
点击选中浮动对象
拖拽移动浮动对象
拖拽边角或边缘调整大小
按住 Ctrl 键拖拽复制浮动对象
API 参考
FloatingObject 构造函数
name：浮动对象的名称
x：水平位置（像素）
y：垂直位置（像素）
width：宽度（像素）
height：高度（像素）
content() 方法
value：可选，要设置的 HTML 元素内容
返回值：获取或设置浮动对象的内容
floatingObjects.add() 方法
floatingObject：要添加的 FloatingObject 实例
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
var floatingObject1 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 50, 0, 100, 100);
var img1 = document.createElement("img");
img1.src = "$DEMOROOT$/spread/source/images/splogo.png";
floatingObject1.content(img1);
sheet.floatingObjects.add(floatingObject1);
var floatingObject2 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f2", 50, 120, 100, 100);
var img2 = document.createElement("img");
img2.src = "$DEMOROOT$/spread/source/css/images/Food.png";
floatingObject2.content(img2);
sheet.floatingObjects.add(floatingObject2);
var floatingObject3 = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f3", 50, 240, 100, 100);
var img3 = document.createElement("img");
img3.src = "$DEMOROOT$/spread/source/css/images/Calories.png";
floatingObject3.content(img3);
sheet.floatingObjects.add(floatingObject3);
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width: 100%; height: 100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
