NPM
$ npm install tiptap-extension-global-drag-handle
Yarn
$ yarn add tiptap-extension-global-drag-handle
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
new Editor({
extensions: [
GlobalDragHandle,
],
})
In order to enjoy all the advantages of the drag handle, it is recommended to install the AutoJoiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.
Optionally, you can also configure the drag handle.
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
new Editor({
extensions: [
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
}),
],
})
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 example, to see how you can apply styling.