Guides
Global Drag Handle (New)
Drag and drop blocks across the editor
1
Install the extension
Install the extension with a package manager of your choice.
$ npm i tiptap-extension-global-drag-handle
$ 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 i tiptap-extension-auto-joiner
$ yarn add tiptap-extension-auto-joiner
2
Add drag extension
// 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} />
}
3
Configure the extension
//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} />
}
4
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 to see an example of drag handle styling.