How do I get a pane to move using dojo Moveable?

ChrisSergent — Tue, 02 Dec 2014 20:09:55 GMT

I have a working editor widget but I want to be able to move the pane based on onmousedown. I used this example here: dojo/dnd/Moveable — The Dojo Toolkit - Reference Guide

This is the block of code that is supposed to allow me to move the pane:

on(dom.byId("templatePickerPane"), "onmousedown", function () {

var dnd = new Moveable(dom.byId("templatePickerPane"));

});

Any idea how I get this object to move on mouse down? Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Decatur Graphics Editor</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

width:100%;

position:absolute;

z-index:0;

}

/* Editor style begin */

#templatePickerPane {

width: 200px;

height:300px;

overflow: hidden;

z-index:50;

top:50%;

right:0%;

position:absolute;

}

#panelHeader

{

background-color: #92A661;

border-bottom: solid 1px #92A860;

color: #FFF;

font-size: 18px;

height: 24px;

line-height: 22px;

margin: 0;

overflow: hidden;

padding: 10px 10px 10px 10px;

}

#editorDiv

{

background-color:White;

}

.esriEditor .templatePicker

{

padding-bottom: 5px;

padding-top: 5px;

height: 500px;

border-radius: 0px 0px 4px 4px;

border: solid 1px #92A661;

}

.dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content

{

position: relative;

}

/* Editor Style End */

</style>

var map;

require(["esri/map", "esri/config",

"esri/geometry/Extent",

"esri/dijit/editing/Editor",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/SnappingManager",

"esri/tasks/GeometryService",

"esri/toolbars/draw",

"dojo/dom",

"dojo/keys",

"dojo/on",

"dojo/parser",

"dojo/_base/array",

"dojo/i18n!esri/nls/jsapi",

"dojo/dnd/Moveable",

"dojo/domReady!"], function (Map, esriConfig, Extent, Editor, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

FeatureLayer, SnappingManager, GeometryService, Draw, dom, keys, on, parser, arrayUtils, i18n, Moveable

) {

parser.parse();

//snapping is enabled for this sample - change the tooltip to reflect this

i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";

i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

/* The proxy comes before all references to web services */

/* Files required for security are proxy.config, web.config and proxy.ashx

- set security in Manager to Private, available to selected users and select Allow access to all users who are logged in

(Roles are not required)

The proxy section is defined on the ESRI sample. I have included it as

part of the documentation reads that the measuring will not work.

I thought that might be important.

// Proxy Definition Begin

//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.

//If this null or not available the project and lengths operation will not work.

// Otherwise it will do a http post to the proxy.

esriConfig.defaults.io.proxyUrl = "proxy.ashx";

esriConfig.defaults.io.alwaysUseProxy = true;

// Proxy Definition End

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

map.on("layers-add-result", initEditing);

// add imagery

var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// set operational layers

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

// add operational layers

map.addLayer(operationalLayer);

// add point feature layer

var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayers([pointFeatureLayer]);

map.infoWindow.resize(400, 300);

function initEditing(event) {

var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

return {

"featureLayer": layer.layer

};

});

var settings = {

map: map,

layerInfos: featureLayerInfos

};

var params = {

settings: settings

};

var editorWidget = new Editor(params, 'editorDiv');

editorWidget.startup();

var options = { snapKey: keys.copyKey };

map.enableSnapping(options);

}

on(dom.byId("templatePickerPane"), "onmousedown", function () {

var dnd = new Moveable(dom.byId("templatePickerPane"));

});

}

);

</script>

</head>

</div>

Default Editor

</div>

</div>

</body>

</html>

Re: How do I get a pane to move using dojo Moveable?

ChrisSergent — Tue, 02 Dec 2014 20:18:28 GMT

If you have this question, I changed my line to the following to make it work:

on(Moveable(dom.byId("templatePickerPane")), "onmousedown", function () {

var dnd = new Moveable(dom.byId("templatePickerPane"));

});

topic How do I get a pane to move using dojo Moveable? in ArcGIS JavaScript Maps SDK Questions

How do I get a pane to move using dojo Moveable?

Re: How do I get a pane to move using dojo Moveable?