Drag and drop

NodeGui supports drag and drop functionality.

In order to enable a widget to accept drops you need call


Following this you can then listen to few QEvents like DragEnter, DragMove, DragLeave and Drop

The complete code would look something like this:

widget.addEventListener(WidgetEventTypes.DragEnter, (e) => {
let ev = new QDragMoveEvent(e);
console.log('dragEnter', ev.proposedAction());
let mimeData = ev.mimeData();
mimeData.text(); //Inspection of text works
console.log('mimeData', {
hasColor: mimeData.hasColor(),
hasHtml: mimeData.hasHtml(),
hasImage: mimeData.hasImage(),
hasText: mimeData.hasText(),
hasUrls: mimeData.hasUrls(),
html: mimeData.html(),
text: mimeData.text(),
}); //Inspection of MIME data works
let urls = mimeData.urls(); //Get QUrls
for (let url of urls) {
let str = url.toString();
console.log('url', str); //Log out Urls in the event
ev.accept(); //Accept the drop event, which is crucial for accepting further events
widget.addEventListener(WidgetEventTypes.DragMove, (e) => {
let ev = new QDragMoveEvent(e);
widget.addEventListener(WidgetEventTypes.DragLeave, (e) => {
console.log('dragLeave', e);
let ev = new QDragLeaveEvent(e);
ev.ignore(); //Ignore the event when it leaves
console.log('ignored', ev);
widget.addEventListener(WidgetEventTypes.Drop, (e) => {
let dropEvent = new QDropEvent(e);
let mimeData = dropEvent.mimeData();
console.log('dropped', dropEvent.type());
let urls = mimeData.urls();
for (let url of urls) {
let str = url.toString();
console.log('url', str); //Example of inspection of dropped data.