# 사용자 정의 움직이는 개체

## Content

사용자 정의 움직이는 개체를 생성할 수 있습니다.
움직이는 개체에 HTML 요소를 넣을 수 있습니다. 다음 이미지는 움직이는 개체 안에 버튼 요소를 표시한 예시입니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/customfloating.png)
움직이는 개체가 보이도록 할지 또는 잠금을 설정할 지를 [isVisible](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isVisible) 또는 [isLocked](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isLocked) 메서드로 지정할 수 있습니다. `isLocked` 메서드는 시트가 보호된 상태일 때만 효과가 있습니다. [dynamicMove](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicMove) 메서드를 사용하여 행이나 열을 숨기거나 표시, 크기 조정 또는 이동할 때 움직이는 개체를 함께 이동할 지를 지정할 수 있습니다. 마찬가지로, [dynamicSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicSize) 메서드를 통해 행이나 열을 숨기거나 표시, 크기 조정 또는 이동할 때 움직이는 개체 크기가 변경될 지를 지정할 수 있습니다.
[fixedPosition](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#fixedPosition) 메서드가 true로 설정된 경우, 스크롤, 숨기기, 표시, 크기 조정 또는 행/열 이동 후에도 움직이는 개체의 위치는 고정됩니다. 이 경우 [dynamicMove](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicMove) 및 [dynamicSize](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#dynamicSize) 메서드는 비활성화됩니다. 단, `fixedPosition`이 true이더라도 움직이는 개체는 이동 및 크기 조정이 가능합니다.
`fixedPosition`이 true일 경우에도 다음 메서드들은 기존과 동일하게 동작합니다:

* [endColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumn)
* [endColumnOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumnOffset)
* [endRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRow)
* [endRowOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRowOffset)
* [height](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#height)
* [startColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn)
* [startColumnOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset)
* [startRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow)
* [startRowOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset)
* [width](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#width)
* [x](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#x)
* [y](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#y)

움직이는 개체는 마우스로 크기 조정 또는 이동할 수 있습니다. 또한 [width](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#width), [height](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#height), [x](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#x), [y](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#y) 메서드를 사용하여 너비, 높이 및 위치를 설정할 수 있습니다. [startColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn) 및 [startRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow) 메서드를 사용하여 행과 열 인덱스로 위치를 지정할 수 있으며, [startColumnOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset) 및 [startRowOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset) 메서드를 사용하여 오프셋도 설정할 수 있습니다. [endColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumn), [endRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRow), [endColumnOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endColumnOffset), [endRowOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#endRowOffset) 메서드도 설정 가능합니다.
다음 이미지는 [startColumn](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumn), [startRow](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRow), [startColumnOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startColumnOffset), [startRowOffset](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#startRowOffset) 메서드를 사용한 사용자 정의 움직이는 개체 예시입니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/offset.png)

움직이는 개체는 마우스 좌클릭 또는 우클릭으로 선택할 수 있으며, [isSelected](/spreadjs/api/v18/classes/GC.Spread.Sheets.FloatingObjects.FloatingObject#isSelected) 메서드를 통해 선택 상태를 확인할 수 있습니다. 여러 개의 움직이는 개체 사이를 Tab 키 또는 Shift+Tab으로 이동할 수 있습니다. Ctrl 또는 Shift 키를 누른 채 우클릭하면 여러 움직이는 개체를 동시에 선택할 수 있습니다.
표준 단축키를 사용하여 움직이는 개체를 잘라내기, 복사 또는 붙여넣기 할 수 있습니다. 실행 취소(undo) 및 다시 실행(redo)도 지원됩니다.
다음은 시트에 사용자 정의 움직이는 개체를 추가하는 코드 샘플입니다:

```javascript
var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);
var btn = document.createElement('button');
btn.style.width = "60px";
btn.style.height = "30px";
btn.innerText = "button";
customFloatingObject.content(btn);
activeSheet.floatingObjects.add(customFloatingObject);
```

HTML 요소를 움직이는 개체의 콘텐츠로 설정할 경우, 복제되면서 움직이는 개체의 복잡한 정책으로 인해 해당 요소의 속성이 손실됩니다.
HTML 요소의 속성은 움직이는 개체의 콘텐츠가 로드된 후 [FloatingObjectLoaded](/spreadjs/api/v18/classes/GC.Spread.Sheets.Events#FloatingObjectLoaded_EV) 이벤트를 통해 적용할 수 있습니다. 다음 코드는 로드된 움직이는 개체 콘텐츠에 ID와 이벤트 리스너를 추가하는 예시입니다:

```javascript
activeSheet.bind(GC.Spread.Sheets.Events.FloatingObjectLoaded, (_, args) => {
    args.element.id = 'some_id';
    args.element.addEventListener('click', () => alert('clicking'));
});
```