The following keys provide actions for working with the floating object:
Esc: If you select multiple floating objects, and then press Esc, all the floating objects will be deselected.
Delete: Select multiple floating objects, then press Delete, and the selected floating objects will be deleted.
Tab: Select a floating object, then press Tab to navigate to the next floating object and select it.
Shift+Tab: Select a floating object, then press Shift+Tab to navigate to the previous floating object and select it.
Ctrl+X: Select multiple floating objects, then press Ctrl+X, and the selected floating objects will be cut to the Clipboard.
Ctrl+C: Select multiple floating objects, then press Ctrl+C, and the selected floating object will be copied to the Clipboard.
Ctrl+V: Select a cell, then press Ctrl+V to paste from the Clipboard.
Ctrl+A: Select a floating object, then press Ctrl+A to select all the floating objects.
Up: Select some floating objects, then press the Up arrow to move the selected floating objects up.
Down: Select some floating objects, then press the Down arrow to move the selected floating objects down.
Left: Select some floating objects, then press the Left arrow to move the selected floating objects to the left.
Right: Select some floating objects, then press the Right arrow to move the selected floating objects to the right.
You can also interact with the floating object using mouse actions. When you select a floating object, a position indicator and eight resize indicators are displayed. You can drag the resize indicator to resize the floating object. You can also drag the floating object and drop it in another position.
You can drag and copy and paste the floating objects by pressing the Ctrl key while dragging the floating object with the mouse. After you release the mouse the dragged floating objects will be copied and pasted.
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 charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.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;
}
