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

ChrisSergent · ‎12-02-2014

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>

ChrisSergent · ‎12-02-2014

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"));

});