Content Pane Functionality is overrode when moveable (dnd) function is added

[BrandonPrice]

I have to separate functions. The first function gets overrode by the second. What can I do to prevent this?

app.utilitySelector = new utilitySelectorModule();
app.utilitySelector.init();
var utilitySelectorToolBtn = dom.byId("PMSelect");
on(utilitySelectorToolBtn, "click", function (event) {
if (app.utilitySelector.isVisible === true) {
app.utilitySelector.hide();
} else { // not open
app.utilitySelector.show();
}
});

on(dom.byId("Pane"), "click", function(){
var dnd = new Moveable(dom.byId("Pane"));
});

The first functions opens a dojo content pane from a button onlick. The second function makes the content pane moveable. The functionality of the content pane is suspended as soon as the content pane is moved.

Any suggestions?

https://community.esri.com/community/developers/gis-developers?sr=search&searchId=bcfa4c7a-04aa-4d71...‌

https://community.esri.com/groups/web-app-builder-custom-widgets?sr=search&searchId=a21eafc1-98af-47...‌

[RobertScheitlin__GISP]

Brandon,

   Switch to a TitlePane.

[BrandonPrice]

Thanks Robert. This is what I have:

<div id="SelectorTable" style="display: none;" >
<div id="Pane" style="position:absolute; left:490px; top:140px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Postmile Selector', open:true" data-dojo-props="closable:true" class="PaneContent">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:230px; overflow:auto;">

Or is it more complicated than this?

[RobertScheitlin__GISP]

At first glace it looks good.

[BrandonPrice]

Hi Robert,

My pane still looks like the below. I also tried putting data-dojo-attach-point="closeButtonNode" in the title pane div instead of data-dojo-props="closable:true".

[RobertScheitlin__GISP]

Brandon,

   From the looks of that image you are not parsing the layout dijits in your code or you do not have the right css files or class referenced in your project.

[BrandonPrice]

Hi Robert,

I am using claro, but customized the title panel to not show the arrow node and resized the title pane. I would rather have a close "x" button like the tab container.

[BrandonPrice]

This is what I have: <div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Postmile Selector', open:'true', closable:'true'" data-dojo-attach-point="closeButtonNode" class="PaneContent">

[BrandonPrice]

My method doesn't work with the basemap gallery's title pane either in the sandbox.

[RobertScheitlin__GISP]

Sounds like what you really need to use is the dojox floating pane as it is a pane that is already movable:

Note: you will see that the floating pane has a close button but that button destroys the pane and it contents so you do not use that, instead you use the dock button.

link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/dojox/layout/resources/FloatingPane.css" />‍

//require
"dojox/layout/FloatingPane",

//here is an snippet of how I use it.
fp = new FloatingPane({
        title: "Measure",
        closable: false,
        resizable: true,
        dockable: true,
        style: "position:absolute;top:250px;left:350px;width:260px;height:120px;visibility:hidden;",
        id: "wfp"
      }, dom.byId("divFloatingPane"));
      fp.startup();
      on(fp.dockNode, "click", function(evt) {
        measure.deactivate();
        removeCurrentSelTool();
        navToolbar.activate(Navigation.PAN);
        domClass.add(dom.byId("panmap"), "selected");
      });

//In my css I replace the dock arrow with a close button
.dojoxFloatingMinimizeIcon {
  background: url('../images/w_close.png') no-repeat center center;
  width: 21px;
  margin: 0px 4px;
  overflow: hidden;
  float: right;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

//to open the fp just call
fp.show();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can see this in action on my old Parcel Viewer site here (just click the measure button):

Calhoun County Parcel Viewer 

[BrandonPrice]

Thanks Robert. Thanks for this. Sorry for getting back to you so late on this. Out of curiosity, to make the title pane movable in an esri popup, you would use: (".title", map.infoWindow.domNode)[0];, what would be the syntax if you wanted to do the same thing for a dojo content pane? I would assume ".title" would be the same, but I am not sure about map.infoWindow.domNode.