Drag and drop

The drag and drop feature lets you drag and drop text, images, tables, and other content within the editor. You can also drag and drop HTML and plain-text content from outside the editor.

# Demo

The demo below lets you drag contacts from the list to the editor. The contacts are inserted into the editor as custom widgets representing the h-card microformat.

Photos: Wikipedia.org.

The source code of the above snippet is available here: drag-drop.js, drag-drop.html.

# File upload via drag and drop

When the CKBox file manager is enabled in your CKEditor 5 integration, you can upload files and images using the drag and drop mechanism. You can test this solution in the CKBox demo.

# Installation

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-clipboard package:

npm install --save @ckeditor/ckeditor5-clipboard

Then add the Clipboard plugin to your plugin list:

import { Clipboard } from '@ckeditor/ckeditor5-clipboard';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Clipboard, Bold, /* ... */ ],
})
    .then( /* ... */ )
    .catch( /* ... */ );

The DragDrop plugin will activate along with the clipboard plugin.

# Drag and drop of content blocks

In the v38.0.0 release, we introduced plugins that enable dragging content blocks such as paragraphs, tables, or lists inside the editor. This allows you to select an entire block or multiple blocks, and move them before or after other blocks.

Functions introduced in the initial release include:

• Selection of the text, elements, multiple blocks, and moving these around.
• Placement of blocks inside other blocks such as tables, blockquotes, etc.
• The pilcrow icon in the balloon block editor now behaves as a drag handle.

Feedback for the drag and drop of blocks is gathered in issue #7731. If you have any thoughts on what should work better, leave us a comment!

# Classic editor demo

Select a block or blocks, and drag them across the document. You can place blocks inside other blocks, such as tables and blockquotes.

# Installation

To enable the block drag and drop in a classic editor, you need to add the DragDropExperimental module to your editor configuration:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Clipboard, DragDropExperimental } from '@ckeditor/ckeditor5-clipboard';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Clipboard, DragDropExperimental, /* ... */ ],
})
    .then( /* ... */ )
    .catch( /* ... */ );

# Balloon block editor demo

In the balloon block editor, you can also drag content blocks using the drag handle. Select or focus on the block, and then drag the block with the pilcrow icon .

# Installation

To enable the block drag and drop in a balloon block editor, you need to add the DragDropExperimental and the DragDropBlockToolbar modules to your editor configuration::

import { BalloonEditor } from '@ckeditor/ckeditor5-editor-balloon';
import {
    DragDropExperimental,
    DragDropBlockToolbar,
} from '@ckeditor/ckeditor5-clipboard';
import { BlockToolbar } from '@ckeditor/ckeditor5-ui';

BalloonEditor.create(document.querySelector( '#editor' ), {
    plugins: [
        Clipboard,
        DragDropExperimental,
        DragDropBlockToolbar,
        BlockToolbar,
        /* ... */
    ],
})
    .then( /* ... */ )
    .catch( /* ... */ );

# Related features

• CKEditor 5 supports dropping images from the file system thanks to the image upload feature.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-clipboard.