The drag and drop feature lets you drag and drop both text and 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. You can also drag and drop HTML and plain text content from outside the editor and use it to upload images.
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. You can also select and drag around existing content inside the editor.
List of contacts
Huckleberry Finn
D'Artagnan
Little Red Riding Hood
Alice
Phileas Fogg
Winnetou
Edmond Dantès
Robinson Crusoe
The Annual Meeting of Fictional Characters
Announcement
It is with great pleasure that we hereby announce that the theme of this year’s meeting is “E-ink Technology and
Classic Fairy Tales”. As every year, the event will be hosted in The Wonderland by
Alice+20 4345 234 235, starting tomorrow at 8:00 GMT.
Speakers and agenda
TBA.
Venue
For detailed information, please contact
Huckleberry Finn+48 1345 234 235.
Accommodation
Many thanks to Robinson Crusoe+45 2345 234 235 who kindly offered his island to the guests of the annual meeting.
It is with great pleasure that we hereby announce that the theme of this year’s meeting is “E-ink Technology and Classic Fairy Tales”. As every year, the event will be hosted in The Wonderland by Alice+20 4345 234 235, starting tomorrow at 8:00 GMT.
Speakers and agenda
TBA.
Venue
For detailed information, please contact Huckleberry Finn+48 1345 234 235.
Accommodation
Many thanks to Robinson Crusoe+45 2345 234 235 who kindly offered his island to the guests of the annual meeting.
The source code of the above snippet is available here: drag-drop.js, drag-drop.html. You can find the configuration of the editor used in the demo here: build-drag-drop-source.js. The code for the custom plugin responsible for handling the h-cards is available here: hcard.js.
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.
The drag and drop plugin fully supports dragging content blocks such as paragraphs, tables, or lists inside the editor by default. This allows you to select an entire block or multiple blocks, and move them before or after other blocks.
The drag and drop functions include:
Selection of the text, elements, multiple blocks, and moving these around.
Placement of blocks inside other blocks such as tables, blockquotes, etc.
The braille dots panel icon in the balloon block editor now behaves as a drag handle.
Select a block or blocks, and drag them across the document. You can place blocks inside other blocks, such as tables and blockquotes.
The Flavorful Tuscany Meetup
Welcome letter
Dear Guest,
We are delighted to welcome you to the annual
Flavorful Tuscany Meetup. We hope you will enjoy the program
as well as your stay at the
Bilancino Hotel.
Bilancino Hotel
Please find below the full schedule of the event.
Saturday, July 14
9:30 AM - 11:30 AM
Americano vs. Brewed - “know
your coffee” with:
Giulia Orlanda
Stefano Garau
Giuseppe Russo
1:00 PM - 3:00 PM
Regional delicacies of Tuscany
- live cooking
Incorporate the freshest ingredients with
Rita Fresco
5:00 PM - 8:00 PM
Tuscan vineyards at a glance -
wine-tasting with Frederico Riscoli
The annual Flavorful Tuscany meetups are always a culinary
discovery. You get the best of Tuscan flavors during an intense
one-day stay at one of the top hotels in the region. All the
sessions are led by top chefs passionate about their profession.
I would recommend saving the date in your calendar for this one!
Angelina Calvino, food journalist
Please arrive at the
Bilancino Hotel reception desk
at least half an hour earlier
to ensure that the registration process goes as smoothly as
possible.
We look forward to welcoming you to the event.
Victoria Valc
Event Manager
Bilancino Hotel
The Flavorful Tuscany Meetup
Welcome letter
Dear Guest,
We are delighted to welcome you to the annual Flavorful Tuscany Meetup. We hope you will enjoy the program as well as your stay at the Bilancino Hotel.
Bilancino Hotel
Please find below the full schedule of the event.
Saturday, July 14
9:30 AM - 11:30 AM
Americano vs. Brewed - “know your coffee” with:
Giulia Orlanda
Stefano Garau
Giuseppe Russo
1:00 PM - 3:00 PM
Regional delicacies of Tuscany - live cooking
Incorporate the freshest ingredients with Rita Fresco
5:00 PM - 8:00 PM
Tuscan vineyards at a glance - wine-tasting with Frederico Riscoli
The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels in the region. All the sessions are led by top chefs passionate about their profession. I would recommend saving the date in your calendar for this one!
Angelina Calvino, food journalist
Please arrive at the Bilancino Hotel reception desk at least half an hour earlier to ensure that the registration process goes as smoothly as possible.
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 braille dots panel icon .
The Flavorful Tuscany Meetup
Welcome letter
Dear Guest,
We are delighted to welcome you to the annual Flavorful Tuscany Meetup. We hope you will enjoy the program as well as your stay at the Bilancino Hotel.
Bilancino Hotel
Please find below the full schedule of the event.
Saturday, July 14
9:30 AM - 11:30 AM
Americano vs. Brewed - “know your coffee” with:
Giulia Orlanda
Stefano Garau
Giuseppe Russo
1:00 PM - 3:00 PM
Regional delicacies of Tuscany - live cooking
Incorporate the freshest ingredients with Rita Fresco
5:00 PM - 8:00 PM
Tuscan vineyards at a glance - wine-tasting with Frederico Riscoli
The annual Flavorful Tuscany meetups are always a culinary discovery. You get the best of Tuscan flavors during an intense one-day stay at one of the top hotels in the region. All the sessions are led by top chefs passionate about their profession. I would recommend saving the date in your calendar for this one!
Angelina Calvino, food journalist
Please arrive at the Bilancino Hotel reception desk at least half an hour earlier to ensure that the registration process goes as smoothly as possible.
Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.
After installing the editor, add the feature to your plugin list and toolbar configuration:
The drag and drop target line color is managed by the CSS variable (--ck-clipboard-drop-target-color). You can use the following snippet to change the color of the line:
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing?
Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features.
We appreciate your feedback to help us ensure its accuracy and completeness.