Description
The editor has some built in Drag & Drop implementations, to handle image, file and text drops onto a document. And It is possible to register your own drag & drop handlers.
Dropping objects over a dashboard is a separate subject.
Add Custom Drag & Drop Handlers
You can register your own drop handlers which will be called before the core drop handlers
are called. In your plugin you can either call next() which will call the next drop handler, or you can call end() if you either handle the drop with this handler or wish to
abort without handling the drop.
The following example recognises a custom mime type in the DataTransfer object and inserts an HTML component into the document at the dropLocation:
Example code in app/editor.js
liEditor.dropHandlers.register({
name: 'customPlugin',
handler: function ({dropActions, dropObject, next, end}) {
const {dataTransfer} = dropObject
const data = dataTransfer.getData('application/test+json')
if (!data) return next()
const {component, directiveName} = dropActions.createHtmlComponent()
const directive = component.directives.get(directiveName)
directive.setContent({
html: data.html
})
dropActions.dropLocation.insert(component)
end()
}
})
