---
url: >-
  https://plugin.stripo.email/extensions/reference/constants/OrderableItemIconPosition.md
---
# OrderableItemIconPosition

Enum defining the position of the drag handle icon in orderable UI elements.

```typescript
enum OrderableItemIconPosition
```

## Description

`OrderableItemIconPosition` specifies where the drag handle icon should be positioned within orderable list items. This affects both the visual appearance and user interaction patterns when reordering items.

## Import

```typescript
import { OrderableItemIconPosition } from '@stripoinc/ui-editor-extensions';
```

## Values

### TOP

Position the drag handle icon at the top of the item.

```typescript
TOP = 'TOP'
```

***

### LEFT

Position the drag handle icon on the left side of the item.

```typescript
LEFT = 'LEFT'
```

## Usage Examples

### Using TOP Position (Default)

```javascript
import { UIElementType, UEAttr } from '@stripoinc/ui-editor-extensions';

class MyControl extends Control {
    getTemplate() {
        return `
            <div class="container">
                <${UIElementType.ORDERABLE} name="myList">
                    <${UIElementType.ORDERABLE_ITEM}>
                        <${UIElementType.LABEL} ${UEAttr.LABEL.text}="Item 1"></${UIElementType.LABEL}>
                    </${UIElementType.ORDERABLE_ITEM}>
                </${UIElementType.ORDERABLE}>
            </div>`;
    }
}
```

### Using LEFT Position

```javascript
import { UIElementType, UEAttr } from '@stripoinc/ui-editor-extensions';

class MyControl extends Control {
    getTemplate() {
        return `
            <div class="container">
                <${UIElementType.ORDERABLE} name="myList" position="LEFT">
                    <${UIElementType.ORDERABLE_ITEM}>
                        <${UIElementType.LABEL} ${UEAttr.LABEL.text}="Item 1"></${UIElementType.LABEL}>
                    </${UIElementType.ORDERABLE_ITEM}>
                </${UIElementType.ORDERABLE}>
            </div>`;
    }
}
```