QUICK TIPS: Drag-and-drop


#1

Hi All,

Want to implement drag-and-drop into your application ? This should help you get started :slight_smile:

Creating draggables

You can make your GUI Elements draggable by using a helper method:

// Example using a GUI element from Scheme
var el = this._find('MyDraggableElement').$element;

GUI.Helpers.createDraggable(el, {
  data: {
    foo: 'bar'
  }
});

Ref: https://os.js.org/doc/client/OSjs.GUI.Helpers.html#.createDraggable

Creating droppables

You can also make your GUI Elements droppable by using a helper method:

// Example using a GUI element from Scheme
var el = this._find('MyDroppableElement').$element;

GUI.Helpers.createDroppable(el, {
  onItemDropped: function(ev, el, item, args, srcEl) {
    console.log(item.data.foo); // => "bar"
  }
});

Ref: https://os.js.org/doc/client/OSjs.GUI.Helpers.html#.createDroppable

Drop into Window

You can make your window react to drop events by simply enabling it in the constructor. You can catch these events by adding a binding:

  function ApplicationEXAMPLEWindow(app, metadata, scheme) {
    Window.apply(this, ['ApplicationEXAMPLEWindow', {
      allow_drop: true // <-- IMPORTANT!
    }, app, scheme]);

    this._on('drop', function(ev, type, el, item, args, srcEl) {
      console.log(item.data.foo); // => "bar"
    });
  }

Ref: QUICK TIPS: Window Events