JSFiddle - React, Tailwind, and code Playground

by Shree Khanal

HTML

<script src="http://ckeditor.com/tmp/4.5.0-beta/ckeditor/ckeditor.js"></script>
<div id="commet" draggable="true">Drag me!</div>

<div contenteditable="true">
    <p>foo</p>
</div>

JavaScript

document.getElementById( 'commet' ).addEventListener( 'dragstart', function drag( $evt ) {
    var evt = { data: { $: $evt } }; // Create CKEditor event.

    // Create data transfer facade so we can set custom data types (like 'commet').
    CKEDITOR.plugins.clipboard.initDragDataTransfer( evt );
    evt.data.dataTransfer.setData( 'commet', true );

    // Some text need to be set, otherwise drop event will not be fired.
    evt.data.dataTransfer.setData( 'text', 'x' );
} );

CKEDITOR.instances.editor1.on( 'drop', function( evt ) {
    var dataTransfer = evt.data.dataTransfer;

    // Check if element is marked and set the data.
    if ( dataTransfer.getData( 'commet' ) ) {
        dataTransfer.setData( 'text/html', '<div>Test</div>' ); //set data
    }
} );