AnsweredAssumed Answered

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

Question asked by csergent08 Champion on Dec 2, 2014
Latest reply on Dec 2, 2014 by csergent08

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>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/soria/soria.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

 

 

        

        <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>

     

       

        <script src="http://js.arcgis.com/3.11/" type="text/javascript"></script>

               

        <script type="text/javascript">

       

            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>

    <body class="soria">

      <div id="mapDiv">

      </div>

      <div id="templatePickerPane">

       

        <div id="panelHeader">

          Default Editor

        </div>

        <div style="padding:10px;" id="editorDiv">

           

        </div>

      </div>

     

  </body>

     

   

</html>

Outcomes