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>



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

        <link rel="stylesheet" href="">





            html, body, #mapDiv













            /* Editor style begin */


            #templatePickerPane {

                width: 200px;


                overflow: hidden;









                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;











              .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 */





        <script src="" type="text/javascript"></script>


        <script type="text/javascript">


            var map;

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




























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

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

            ) {






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

                = "proxy.ashx";

                = true;



                         // Proxy Definition End



                         // declare geometry service

                         esriConfig.defaults.geometryService = new GeometryService("");



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


                         // set operational layers

                         var operationalLayer = new ArcGISDynamicMapServiceLayer("", { "opacity": 0.5 });

                         // add operational layers




                         // add point feature layer

                         var pointFeatureLayer = new FeatureLayer("", {

                             mode: FeatureLayer.MODE_ONDEMAND,

                             outFields: ["*"]







                         map.infoWindow.resize(400, 300);



                         function initEditing(event) {

                             var featureLayerInfos =, function (layer) {

                                 return {

                                     "featureLayer": layer.layer





                             var settings = {

                                 map: map,

                                 layerInfos: featureLayerInfos


                             var params = {

                                 settings: settings


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




                             var options = { snapKey: keys.copyKey };









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

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












    <body class="soria">

      <div id="mapDiv">


      <div id="templatePickerPane">


        <div id="panelHeader">

          Default Editor


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