> ## Documentation Index
> Fetch the complete documentation index at: https://novel.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Global Drag Handle (New)

> Drag and drop blocks across the editor

<Steps>
  <Step title="Install the extension">
    Install the extension with a package manager of your choice.

    ```NPM
    $ npm i tiptap-extension-global-drag-handle
    ```

    ```Yarn
    $ yarn add tiptap-extension-global-drag-handle
    ```

    In order to enjoy all the advantages of a drag handle, it is recommended to install the auto joiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.

    ```NPM
    $ npm i tiptap-extension-auto-joiner
    ```

    ```Yarn
    $ yarn add tiptap-extension-auto-joiner
    ```
  </Step>

  <Step title="Add drag extension">
    ```tsx
    // extensions.ts
    import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
    import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

    export const defaultExtensions = [
        GlobalDragHandle,
        AutoJoiner, // optional
        // other extensions
    ];

    // editor.tsx
    const Editor = () => {
        return <EditorContent extensions={defaultExtensions} />
    }
    ```
  </Step>

  <Step title="Configure the extension">
    ```tsx
    //extensions.ts
    import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
    import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

    export const defaultExtensions = [
        GlobalDragHandle.configure({
            dragHandleWidth: 20,    // default

            // The scrollTreshold specifies how close the user must drag an element to the edge of the lower/upper screen for automatic 
            // scrolling to take place. For example, scrollTreshold = 100 means that scrolling starts automatically when the user drags an 
            // element to a position that is max. 99px away from the edge of the screen
            // You can set this to 0 to prevent auto scrolling caused by this extension
            scrollTreshold: 100     // default
        }),
        AutoJoiner.configure({
            elementsToJoin: ["bulletList", "orderedList"] // default
        }),
        // other extensions
    ];

    // editor.tsx
    const Editor = () => {
        return <EditorContent extensions={defaultExtensions} />
    }
    ```
  </Step>

  <Step title="Add styling">
    By default the drag handle is headless, which means it doesn't contain any css. If you want to apply styling to the drag handle, use the class "drag-handle" in your css file.

    Take a look at [this](https://github.com/steven-tey/novel/blob/main/apps/web/styles/prosemirror.css#L131) to see an example of drag handle styling.
  </Step>
</Steps>