---
title: "DragPanHandler | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Class DragPanHandler

The `DragPanHandler` allows the user to pan the map by clicking and dragging the cursor.

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled)

## Constructors[](#constructors-1)

### constructor[](#constructor)

-   new DragPanHandler(  
        el: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/),  
        mousePan: [MousePanHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MousePanHandler/),  
        touchPan: [TouchPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TouchPanHandler/),  
    ): DragPanHandler[](#constructordragpanhandler)
    
    #### Parameters
    
    -   el: [HTMLElement](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.HTMLElement/)
    -   mousePan: [MousePanHandler](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.MousePanHandler/)
    -   touchPan: [TouchPanHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.TouchPanHandler/)
    
    #### Returns DragPanHandler
    
    #### Internal[](#internal)
    

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    Disables the "drag to pan" interaction.
    
    #### Returns void
    
    #### Example[](#example)
    
    ```typescript
    map.dragPan.disable();
    ```
    

### enable[](#enable)

-   enable(options?: boolean | [DragPanOptions](https://docs.maptiler.com/sdk-js/api-reference/types/DragPanOptions/)): void[](#enable-1)
    
    Enables the "drag to pan" interaction.
    
    #### Parameters
    
    -   `Optional`options: boolean | [DragPanOptions](https://docs.maptiler.com/sdk-js/api-reference/types/DragPanOptions/)
        
        Options object
        
    
    #### Returns void
    
    #### Example[](#example-1)
    
    ```typescript
    map.dragPan.enable();
      map.dragPan.enable({
         linearity: 0.3,
         easing: bezier(0, 0, 0.3, 1),
         maxSpeed: 1400,
         deceleration: 2500,
      });
    ```
    

### isActive[](#isactive)

-   isActive(): boolean[](#isactive-1)
    
    Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.
    
    #### Returns boolean
    
    `true` if the "drag to pan" interaction is active.
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
    
    #### Returns boolean
    
    `true` if the "drag to pan" interaction is enabled.