# Move Images

Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.

![Move images example showing positioned images with labels](/docs/cesdk/_astro/browser.hero.CAKADw8M_ZB2reF.webp)

8 mins

estimated time

Live Demo[

Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[

StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-transform-move-browser)[

GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-transform-move-browser)

Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts.

```
import CreativeEditorSDK, {  type EditorPlugin,  type EditorPluginContext} from '@cesdk/cesdk-js';
class Example implements EditorPlugin {  name = 'guides-edit-image-transform-move-browser';
  version = CreativeEditorSDK.version;
  async initialize({ cesdk }: EditorPluginContext): Promise<void> {    if (!cesdk) {      throw new Error('CE.SDK instance is required for this plugin');    }
    // Setup: Load assets and create scene    await cesdk.addDefaultAssetSources();    await cesdk.addDemoAssetSources({      sceneMode: 'Design',      withUploadAssetSources: true    });    await cesdk.createDesignScene();
    const engine = cesdk.engine;    const page = engine.block.findByType('page')[0];
    // Set page dimensions    engine.block.setWidth(page, 800);    engine.block.setHeight(page, 500);
    // Demo 1: Movable Image - Can be freely repositioned by user    const movableImage = await engine.block.addImage(      'https://img.ly/static/ubq_samples/sample_3.jpg',      {        size: { width: 200, height: 200 }      }    );    engine.block.appendChild(page, movableImage);    engine.block.setPositionX(movableImage, 0);    engine.block.setPositionY(movableImage, 100);
    const text1 = engine.block.create('text');    engine.block.setString(text1, 'text/text', 'Movable');    engine.block.setFloat(text1, 'text/fontSize', 32);    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');    engine.block.setWidth(text1, 200);    engine.block.setPositionX(text1, 50);    engine.block.setPositionY(text1, 360);    engine.block.appendChild(page, text1);
    // Demo 2: Percentage Positioning - Responsive layout    const percentImage = await engine.block.addImage(      'https://img.ly/static/ubq_samples/sample_5.jpg',      {        size: { width: 200, height: 200 }      }    );    engine.block.appendChild(page, percentImage);
    // Set position mode to percentage (0.0 to 1.0)    engine.block.setPositionXMode(percentImage, 'Percent');    engine.block.setPositionYMode(percentImage, 'Percent');
    // Position at 37.5% from left (300px), 30% from top (150px)    engine.block.setPositionX(percentImage, 0.375);    engine.block.setPositionY(percentImage, 0.3);
    const text2 = engine.block.create('text');    engine.block.setString(text2, 'text/text', 'Percentage');    engine.block.setFloat(text2, 'text/fontSize', 32);    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');    engine.block.setWidth(text2, 200);    engine.block.setPositionX(text2, 300);    engine.block.setPositionY(text2, 360);    engine.block.appendChild(page, text2);
    // Demo 3: Locked Image - Cannot be moved, rotated, or scaled    const lockedImage = await engine.block.addImage(      'https://img.ly/static/ubq_samples/sample_6.jpg',      {        size: { width: 200, height: 200 }      }    );    engine.block.appendChild(page, lockedImage);    engine.block.setPositionX(lockedImage, 550);    engine.block.setPositionY(lockedImage, 150);
    // Lock the transform to prevent user interaction    engine.block.setBool(lockedImage, 'transformLocked', true);
    const text3 = engine.block.create('text');    engine.block.setString(text3, 'text/text', 'Locked');    engine.block.setFloat(text3, 'text/fontSize', 32);    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');    engine.block.setWidth(text3, 200);    engine.block.setPositionX(text3, 550);    engine.block.setPositionY(text3, 360);    engine.block.appendChild(page, text3);
    // Get current position values    const currentX = engine.block.getPositionX(movableImage);    const currentY = engine.block.getPositionY(movableImage);    console.log('Current position:', currentX, currentY);
    // Move relative to current position    const offsetX = engine.block.getPositionX(movableImage);    const offsetY = engine.block.getPositionY(movableImage);    engine.block.setPositionX(movableImage, offsetX + 50);    engine.block.setPositionY(movableImage, offsetY + 50);  }}
export default Example;
```

This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning.

## Position Coordinates[#](#position-coordinates)

Coordinates originate at the top-left (0, 0) of the parent container. Use **absolute** mode for fixed pixel values or **percentage** mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes.

## Positioning Images[#](#positioning-images)

Position images using `engine.block.setPositionX()` and `engine.block.setPositionY()` with absolute pixel coordinates:

```
engine.block.appendChild(page, movableImage);engine.block.setPositionX(movableImage, 0);engine.block.setPositionY(movableImage, 100);
```

## Getting Current Position[#](#getting-current-position)

Read current position values using `engine.block.getPositionX()` and `engine.block.getPositionY()`. Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0):

```
// Get current position valuesconst currentX = engine.block.getPositionX(movableImage);const currentY = engine.block.getPositionY(movableImage);
```

## Configuring Position Modes[#](#configuring-position-modes)

Control how position values are interpreted using `engine.block.setPositionXMode()` and `engine.block.setPositionYMode()`. Set to `'Absolute'` for pixels or `'Percent'` for percentage values (0.0 to 1.0). Check the current mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. The Percentage Positioning section below demonstrates setting these modes.

## Percentage Positioning[#](#percentage-positioning)

Position images using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to `'Percent'`, then use values between 0.0 and 1.0:

```
// Set position mode to percentage (0.0 to 1.0)engine.block.setPositionXMode(percentImage, 'Percent');engine.block.setPositionYMode(percentImage, 'Percent');
```

Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs.

## Relative Positioning[#](#relative-positioning)

Move images relative to their current position by getting the current coordinates and adding offset values:

```
// Move relative to current positionconst offsetX = engine.block.getPositionX(movableImage);const offsetY = engine.block.getPositionY(movableImage);engine.block.setPositionX(movableImage, offsetX + 50);engine.block.setPositionY(movableImage, offsetY + 50);
```

## Locking Transforms[#](#locking-transforms)

Lock transforms to prevent repositioning, rotation, and scaling by setting `transformLocked` to true:

```
// Lock the transform to prevent user interactionengine.block.setBool(lockedImage, 'transformLocked', true);
```

## Troubleshooting[#](#troubleshooting)

### Image Not Moving[#](#image-not-moving)

Check if transforms are locked using `engine.block.getBool(block, 'transformLocked')`. Ensure the image block exists and values are within parent bounds.

### Unexpected Position Values[#](#unexpected-position-values)

Check position mode using `engine.block.getPositionXMode()` and `engine.block.getPositionYMode()`. Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning.

### Positioned Outside Visible Area[#](#positioned-outside-visible-area)

Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors.

### Percentage Positioning Not Responsive[#](#percentage-positioning-not-responsive)

Ensure position mode is set to `'Percent'` using `engine.block.setPositionXMode(block, 'Percent')`. Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change.

## API Reference[#](#api-reference)

| Method | Description |
| --- | --- |
| `engine.block.addImage()` | Create and position image in one operation |
| `engine.block.setPositionX()` | Set X coordinate value |
| `engine.block.setPositionY()` | Set Y coordinate value |
| `engine.block.getPositionX()` | Get current X coordinate value |
| `engine.block.getPositionY()` | Get current Y coordinate value |
| `engine.block.setPositionXMode()` | Set position mode for X coordinate |
| `engine.block.setPositionYMode()` | Set position mode for Y coordinate |
| `engine.block.getPositionXMode()` | Get position mode for X coordinate |
| `engine.block.getPositionYMode()` | Get position mode for Y coordinate |
| `engine.block.setBool()` | Set transform lock state |
| `engine.block.getBool()` | Get transform lock state |

---



[Source](https:/img.ly/docs/cesdk/vue/edit-image/transform/crop-f67a47)