Simple drag 'n drop in GJS

[Satyajit Sahoo <satyajit happy gmail com>]

Hello all.

I was trying to build a simple app with drag 'n drop with GJS. But since I'm new to this stuff, I'm having a hard time figuring out what to do. Here is the code I've.

#!/usr/bin/gjs

const Gio = imports.gi.Gio;

const Gdk = imports.gi.Gdk;

const Gtk = imports.gi.Gtk;

const Lang = imports.lang;

const APP_NAME = "Crush";

const Application = new Lang.Class({

    Name: APP_NAME,

    _init: function() {

        this.application = new Gtk.Application({

            application_id: "org.ozonos.crush",

            flags: Gio.ApplicationFlags.FLAGS_NONE

        });

        this.application.connect("activate", Lang.bind(this, this._onActivate));

        this.application.connect("startup", Lang.bind(this, this._onStartup));

    },

    _buildUI: function() {

        this._window = new Gtk.ApplicationWindow({

                            application: this.application,

                            window_position: Gtk.WindowPosition.CENTER,

                            title: APP_NAME

                        });

        try {

            let icon = Gtk.IconTheme.get_default().load_icon("crush", 48, 0);

            this._window.set_icon(icon);

        } catch (e) {

            print("Failed to load application icon: " + e.message);

        }

        this._headerbar = new Gtk.HeaderBar({

            title: APP_NAME,

            show_close_button: true

        });

        // Let's set up our window for drag 'n drop

        let dnd = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });

        dnd.set_vexpand(true);

        dnd.set_hexpand(true);

        let target = new Gtk.TargetEntry("text/uri-list", Gtk.TargetFlags.OTHER_APP, 0);

        dnd.drag_dest_set(Gtk.DestDefaults.ALL, [ target ], Gdk.DragAction.PRIVATE);

        dnd.drag_dest_add_image_targets();

        dnd.connect("drag_drop", (...args) => {

            print("Stuff dropped here" + args);

        });

        let label = new Gtk.Label({ label: "Drop images here to Crush!" });

        dnd.set_center_widget(label);

        this._window.add(dnd);

        this._window.set_default_size(800, 600);

        this._window.set_titlebar(this._headerbar);

        this._window.show_all();

    },

    _onActivate: function() {

        this._window.present();

    },

    _onStartup: function() {

        this._buildUI();

    }

});

let app = new Application();

app.application.run(ARGV);

Satyajit Sahoo
UX Designer
Behance Profile

We're all stories, in the end. Just make it a good one, eh? — The Doctor, Season 5, Episode 13.