How to make Panel objects resizeable and/or draggable?

Add-ons Development
#1

Hello! I just did a tutorial, and I got a basic Panel running - I was wondering how I could do either of these:

  • move this panel around
  • resize it panel by dragging its edges?

I tried setting the attribute backdrag to true - but this didn’t seem to affect anything.

I loosely followed the instructions here to set up my popup.

#2

How did you set the attribute? You have to grab the view then set it. Like this:

let myPanel = Panel({.....})

let { getActiveView }=require("sdk/view/core");
getActiveView(myPanel).setAttribute("noautohide", true);
#3

Just like that @noitidart.

Here’s exactly what I have:

var { getActiveView }=require("sdk/view/core");

var my_panel = require("sdk/panel").Panel({
  id:'my_div',
  width: 322,
  height: 242, // element has 1px border!
  position: {'bottom': 40, 'right': 25},
  contentURL: data.url("index.html"),
  contentScriptFile: [ data.url("jquery.js"), data.url("migrate.js"), data.url("index.js") ]
});
getActiveView(my_panel).setAttribute("noautohide", true);
getActiveView(my_panel).setAttribute("backdrag", true);
getActiveView(my_panel).setAttribute("level", 'floating');
#4

I think you have to set the type attribute to something other then arrow. It defaults to arrow type. Try experimenting with that.

#5

Hmm - I tried setting the type attribute to arrow explicitly, but this didn’t yield another either.

It seems that for type:arrow to have any meaning, it must be anchored.

So should take off the position attributes of my panel I assign in its constructor, and manage it through as described here?

Or is it backdrag supposed to work out of the box??

#6

Oh you have to set it away from arrow. Type arrow panels cannot be dragged I’m sure of that.

#7

Did you ever figure out how to do this? I’m trying to do the exact same thing.