작업

움직이는 개체는 끌어서 놓기, 크기 조정, 이동, 복사, 붙여넣기 등의 다양한 작업을 지원합니다. 아래 JavaScript 스프레드시트에 있는 움직이는 개체에 대한 설명에 나열된 작업을 시도해 볼 수 있습니다.

다음 키는 움직이는 개체로 작업하기 위한 동작을 제공합니다: Esc: 여러 움직이는 개체를 선택한 다음 Esc 키를 누르면 모든 움직이는 개체가 선택 취소됩니다. Delete: 여러 움직이는 개체를 선택한 다음 삭제를 누르면 모든 움직이는 개체가 삭제됩니다. Tab: 움직이는 개체를 선택한 다음 Tab 키를 누르면 다음 움직이는 개체로 이동하여 선택합니다. Shift+Tab: 움직이는 개체를 선택한 다음 Shift+Tab 키를 누르면 이전 움직이는 개체로 이동하여 선택합니다. Ctrl+X: 여러 움직이는 개체를 선택한 다음 Ctrl+X 키를 누르면 선택한 움직이는 개체를 잘라내어 클립보드에 넣습니다. Ctrl+C: 여러 움직이는 개체를 선택한 다음 Ctrl+C 키를 누르면 선택한 움직이는 개체가 클립보드에 복사됩니다. Ctrl+V: 셀을 선택한 다음 Ctrl+V 키를 누르면 클립보드에서 붙여넣을 수 있습니다. Ctrl+A: 움직이는 개체를 선택한 다음 Ctrl+A를 누르면 움직이는 개체가 모두 선택됩니다. Up: 일부 움직이는 개체를 선택한 다음 위쪽 화살표를 누르면 선택된 움직이는 개체가 위로 이동합니다. Down: 일부 움직이는 개체를 선택한 다음 아래쪽 화살표를 누르면 선택된 움직이는 개체가 아래로 이동합니다. Left: 일부 움직이는 개체를 선택한 다음 왼쪽 화살표를 누르면 선택된 움직이는 개체가 왼쪽으로 이동합니다. Right: 일부 움직이는 개체를 선택한 다음 오른쪽 화살표를 누르면 선택된 움직이는 개체가 오른쪽으로 이동합니다. 마우스 동작을 사용하여 움직이는 개체와 상호 작용할 수도 있습니다. 움직이는 개체를 선택하면 위치 표시기와 8개의 크기 조정 표시기가 표시됩니다. 크기 조정 표시기를 끌어서 움직이는 개체의 크기를 조정할 수 있습니다. 움직이는 개체를 끌어서 다른 위치에 놓을 수도 있습니다. Ctrl 키를 누른 상태에서 움직이는 개체를 마우스로 끌면 움직이는 개체를 끌어서 복사하여 붙여넣을 수 있습니다. 마우스를 놓은 후 끌어온 움직이는 개체가 복사되어 붙여넣어집니다.
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="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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; }