topic Re: Drag Graphics Point and Drop at New Location in ArcGIS JavaScript Maps SDK Questions

Drag Graphics Point and Drop at New Location

ManishGohil — Mon, 18 Apr 2011 22:37:24 GMT

Hello All,
We have our application developed in .Net using WebADF Map controls.
I need help on how i can implement the "drag graphics point" functionality in our application that built using WebADF.Net controls.
I found that using dojo we can implement drag/drop but i am not able to use dojo with Map control of WebADF.
I also want to know what are the different approach/implementation for drag/drop graphics on Map?
Any help will be appreciated.

One similar post that never replied :
http://forums.esri.com/Thread.asp?c=158&f=2396&t=286884

Thanks
Lala Rabari

Re: Drag Graphics Point and Drop at New Location

HemingZhu — Wed, 20 Apr 2011 20:25:08 GMT

Hello All,
We have our application developed in .Net using WebADF Map controls.
I need help on how i can implement the "drag graphics point" functionality in our application that built using WebADF.Net controls.
I found that using dojo we can implement drag/drop but i am not able to use dojo with Map control of WebADF.
I also want to know what are the different approach/implementation for drag/drop graphics on Map?
Any help will be appreciated.

One similar post that never replied :
http://forums.esri.com/Thread.asp?c=158&f=2396&t=286884

Thanks
Lala Rabari

In JS api it is very easy to drag and drop a gaphic by invoking a couple of event. Here is the sample page from ESRI, I just change a little bit. Try it youself if you are interested.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Draw and drop Point</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.tasks.query");

      //global variables
      var map, defaultSymbol, highlightSymbol, resultTemplate;
      var theGraphic;

      function init() {
        //create map, set initial extent and disable default info window behavior
        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-125.90, 44.60, -114.65, 50.22, new esri.SpatialReference({wkid:4326}))),
          showInfoWindowOnClick:false
        });
        dojo.connect(map, "onLoad", function(map) {
            dojo.connect(dijit.byId('map'), 'resize', resizeMap);
        });
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));

        //initialize symbology
        defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255]));
        highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));

        //initialize & execute query
        var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
        var query = new esri.tasks.Query();
        query.where = "STATE_NAME = 'Washington'";
        query.outSpatialReference = {wkid:102100};
        query.returnGeometry = true;
        query.outFields = ["CITY_NAME"];
        queryTask.execute(query, addPointsToMap);
        //info template for points returned
        resultTemplate = new esri.InfoTemplate("City", "<tr><td>${CITY_NAME}</tr></td>");
       }
       function resizeMap() {
           var resizeTimer;
           clearTimeout(resizeTimer);
           resizeTimer = setTimeout(function() {
               map.resize();
               map.reposition();
           }, 500);
       }
      //add points to map and set their symbology + info template
      function addPointsToMap(featureSet) {
        dojo.forEach(featureSet.features,function(feature){
          map.graphics.add(feature.setSymbol(defaultSymbol).setInfoTemplate(resultTemplate));
        });
        dojo.connect(map.graphics, "onMouseDown", holdGraphic);
        dojo.connect(map, "onMouseDragEnd", releaseGraphic);
      }
      function holdGraphic(evt) {
          map.disablePan();
          theGraphic = evt.graphic;
          theGraphic.setSymbol(highlightSymbol);
      }
      function releaseGraphic(evt) {
          theGraphic.geometry = evt.mapPoint;
          theGraphic.setSymbol(defaultSymbol);
          map.disablePan();
      }
      //find all points within argument extent
      function findPointsInExtent(extent) {
        var results = [];
        dojo.forEach(map.graphics.graphics,function(graphic){
          if (extent.contains(graphic.geometry)) {
            graphic.setSymbol(highlightSymbol);
            results.push(graphic.getContent());
          }
          //else if point was previously highlighted, reset its symbology
          else if (graphic.symbol == highlightSymbol) {
            graphic.setSymbol(defaultSymbol);
          }
        });

        //display number of points in extent
        dojo.byId("inextent").innerHTML = results.length;

        //display list of points in extent
        dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
      }

      dojo.addOnLoad(init);
    </script>

</head>
<body class="claro">
    Draw an Extent on the map to find all points within this extent
    
    <div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
    <br />
</body>
</html>

Re: Drag Graphics Point and Drop at New Location

SteveLi — Thu, 21 Apr 2011 15:36:23 GMT

Where can I find the original sample code? I couldn't find it in the javascript api samples.

Thanks.

Re: Drag Graphics Point and Drop at New Location

HemingZhu — Thu, 21 Apr 2011 16:01:40 GMT

Where can I find the original sample code? I couldn't find it in the javascript api samples.

Thanks.

The orignal sample is at: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/graphics/graphics_extent_query.html. I just changed it a liitle bit for Drag and drop purpose.

Re: Drag Graphics Point and Drop at New Location

derekswingley1 — Sat, 11 Dec 2021 15:04:31 GMT

There's an easier way to do this. I think the code below was originally posted in the old forums but I've hung on to it for a while:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <title>Moving a marker</title> 
    
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/tundra/tundra.css"> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    
    <script type="text/javascript"> 
      dojo.require("esri.map");
      dojo.require("dojox.gfx.move");
 
      dojo.addOnLoad(init);
 
      var map;
      
      function init() {
        map = new esri.Map("map");
        dojo.connect(map, "onLoad", onMapLoad);
        
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(tiledMapServiceLayer);
      }
      
      function onMapLoad() {
        var geometry = map.extent.getCenter().offset(0, 15);
        var symbol = new esri.symbol.SimpleMarkerSymbol().setColor("red");
        var graphic = new esri.Graphic(geometry, symbol);
        
        // Add a graphic
        map.graphics.add(graphic);
 
        // Make the shape moveable
        var dojoShape = graphic.getDojoShape();
        var moveable = new dojox.gfx.Moveable(dojoShape);
        
        // Update the geometry at the end of move
        var moveStopToken = dojo.connect(moveable, "onMoveStop", function(mover) {
          // Get the transformation that was applied to 
          // the shape since the last move
          var tx = dojoShape.getTransform();
          
          var startPoint = graphic.geometry;
          var endPoint = map.toMap(map.toScreen(startPoint).offset(tx.dx, tx.dy));
          
          // clear out the transformation
          dojoShape.setTransform(null);
          
          // update the graphic geometry
          graphic.setGeometry(endPoint);
          
          // You can find quite a bit of information about
          // applying transformations to Dojo gfx shapes in this
          // document:
          // http://docs.dojocampus.org/dojox/gfx#coordinates-and-transformations
        });
      }
    </script> 
 
  </head> 
  <body class="tundra"> 
    <p> 
    </p> 
 
    <div id="map" style="width:700px; height:500px; border:1px solid #000;"></div> 
  </body> 
</html>

Re: Drag Graphics Point and Drop at New Location

HemingZhu — Fri, 22 Apr 2011 11:41:37 GMT

Where can I find the original sample code? I couldn't find it in the javascript api samples.

Thanks.

All i have to add to the sample code is the following. So make your own judgement what is best for you.

dojo.connect(map.graphics, "onMouseDown", holdGraphic);
dojo.connect(map, "onMouseDragEnd", releaseGraphic);
.....

function holdGraphic(evt) {
map.disablePan();
theGraphic = evt.graphic;
theGraphic.setSymbol(highlightSymbol);
}
function releaseGraphic(evt) {
theGraphic.geometry = evt.mapPoint;
theGraphic.setSymbol(defaultSymbol);
map.disablePan();
}

Re: Drag Graphics Point and Drop at New Location

derekswingley1 — Fri, 22 Apr 2011 17:33:14 GMT

Maybe "easier" was the wrong word...

I think seeing the point move as you drag it provides a better user experience.

Re: Drag Graphics Point and Drop at New Location

ManishGohil — Mon, 25 Apr 2011 22:31:27 GMT

Hi guys thanks for the reply.
Using Heming code the drag/drop graphic functionality is working.
But there is one more question i put in the original forum regarding .Net Web ADF,in our application we don't use dojo directly for Map display and for drawing graphics instead we use Web ADF Web control and framework classes to do that.
Can any one answer how can i use dojo in combination with Web ADF to achieve drag/drop? ,because application uses Web ADF extensively

Thanks in advance
Lala Rabari

Re: Drag Graphics Point and Drop at New Location

ManishGohil — Sat, 11 Dec 2021 15:04:34 GMT

Hello guys,
Actually my goal was to achieve this functionality using Web ADF JavaScript not using the ArcGIS JavaScript i.e dojo.
I got success in implementing drag graphics functionality with the real user experience when user dragging the graphics.

I am posting my code here if it help someone :

ar map;
var mapID = 'Map1';
var graphicCount = 0;
var drawstopflag = false;
var drawRouteFlag = false;
var maptipTitle;
var dragMode = false;

function initialize() {
    // $find is a shortcut method offered by the ASP.NET AJAX JavaScript Library for
    // retrieving JavaScript objects that have been registered as components with the
    // AJAX framework (i.e. either by having been created via $create or explicitly 
    // registered via Sys.Application.addComponent
    map = $find(mapID);

    // map.add_onProgress(customProgress);
    // Show map coordinates in status bar based on cursor location
    map.add_mouseMove(mouseMove);

    map.add_mouseDragCompleted(mouseDragCompleted);
    map.add_mouseDragging(mouseDragging);
    if (drawRouteFlag) {
        drawRoute();
        drawGeometry(geom, "Route");
    }
   
    if (drawstopflag) {
        drawstops();
    }

    

}



var thegraphic;
function mouseDragging(sender, eventArgs) {
   // if (ESRI.ADF.Geometries.Point.isInstanceOfType(eventArgs.element.get_geometry())) {
        if (currentelement != null) {
            currentelement.set_geometry(eventArgs.coordinate);
            // currentelement._parent.get_mapTips()._currentHighlight.set_geometry(evenArgs.coordinate);
            // map.refresh();
        }
   // }

}
function mouseDragCompleted(sender, evenArgs) {
    var tool = $find("Toolbar1");
   // if (ESRI.ADF.Geometries.Point.isInstanceOfType(eventArgs.element.get_geometry())) {
        if (currentelement != null) {
            currentelement.set_geometry(evenArgs.coordinate);
            if (ESRI.ADF.Geometries.Point.isInstanceOfType(currentelement.get_geometry()) & currentelement._attributes["FeatureId"] == "dragStop") {
                __doPostBack("Map1Drag", evenArgs.coordinate.coordinates[0] + '#' + evenArgs.coordinate.coordinates[1]);

            }
            else if(ESRI.ADF.Geometries.Point.isInstanceOfType(currentelement.get_geometry()) & currentelement._attributes["FeatureId"].startsWith("Stop")) 
            {
                __doPostBack("StopDrag", currentelement._attributes["FeatureId"] + "#" + evenArgs.coordinate.coordinates[0] + '#' + evenArgs.coordinate.coordinates[1]);

            }
            
        }
    //}
}
function drawGeometry(geometry, id) {
    map = $find(mapID);
    var highlightSymbol = null;
    var defaultSymbol = null;
    var graphicFeatureGroupID = null;

    // Initialize the graphic feature's symbol and graphicFeatureGroup ID based on the passed-in geometry type
    if (ESRI.ADF.Geometries.Point.isInstanceOfType(geometry)) {
        defaultSymbol = new ESRI.ADF.Graphics.MarkerSymbol(defaultImage, 16, 24, 'hand');
        // defaultSymbol.set_height(24);
        // defaultSymbol.set_width(32);

        highlightSymbol = new ESRI.ADF.Graphics.MarkerSymbol(hightlightImage, 16, 24, 'hand');
        // highlightSymbol.set_height(24);
        //highlightSymbol.set_width(35);

        graphicFeatureGroupID = "pointGraphics";
    }
    else if (ESRI.ADF.Geometries.Polyline.isInstanceOfType(geometry)) {
        defaultSymbol = new ESRI.ADF.Graphics.LineSymbol('blue', 3, 'hand');
        highlightSymbol = new ESRI.ADF.Graphics.LineSymbol('yellow', 3, 'hand');

        graphicFeatureGroupID = "lineGraphics";
    }
    else if (ESRI.ADF.Geometries.Polygon.isInstanceOfType(geometry)) {
        defaultSymbol = new ESRI.ADF.Graphics.FillSymbol('white', 'red', 3, 'hand');
        defaultSymbol.set_opacity(.5);

        highlightSymbol = new ESRI.ADF.Graphics.FillSymbol('yellow', '#00ffff', 3, 'hand');
        highlightSymbol.set_opacity(.5);

        graphicFeatureGroupID = "polygonGraphics";
    }
    var attributes = { "valueInTextbox": "test", "FeatureId": id }
    // Try retrieving the graphicFeatureGroup (i.e. layer) with the ID corresponding to the current 
    // geometry type.  If the group is not found, create it.
    var graphicFeatureGroup = $find(graphicFeatureGroupID);

    if (!graphicFeatureGroup) {
        // Create map tips to associate with the graphic features
        var mapTips = new ESRI.ADF.UI.MapTips();

        // Set the hover template, which will show as the title of the mapTips
        mapTips.set_hoverTemplate("<b><nobr>Dynamic Map Tip</nobr></b>");
        // Set the content template, which will show when the mapTip is clicked. When the mapTip is
        // rendered, (@valueInTextbox} will be replaced by the value of the corresponding graphicFeature's
        // "valueInTextbox" attribute, which is actually a property of the same name on the object stored
        // in the graphicFeature's attributes property.
        mapTips.set_contentTemplate('<span>Value in text box: <b>{@valueInTextbox}</b></span>')
        mapTips.set_animate(true);
        mapTips.set_maxheight(200);
        mapTips.set_width(null);

        // Create the graphic feature group with the ID, symbols, and mapTips.  Also, wire the
        // onMouseOverGraphics and onMouseOutGraphics to the group's mouseOver and mouseOut events    
        graphicFeatureGroup = $create(ESRI.ADF.Graphics.GraphicFeatureGroup, { "id": graphicFeatureGroupID,
            "symbol": defaultSymbol, "highlightSymbol": highlightSymbol
            //, "mapTips": mapTips
        },
             { "mouseOver": onMouseOverGraphics, "mouseOut": onMouseOutGraphics });

        // Add the new graphic feature group to the map
        map.addGraphic(graphicFeatureGroup);
        // mapTips.get_callout().show();
    }

    // Get the text from the textbox
    //var textInputValue = $get('textInput').value;
    // Initialize a JavaScript object with a property called "valueInTextbox" that has
    // the value retrieved from the textbox

    // Increment the graphicCount variable, which will be used in creating the graphicFeature's ID
    graphicCount += 1;
    // Create the graphic feature with a unique ID made up of the graphicFeatureGroupID and the graphicCount; 
    // the passed-in geometry; and the attributes object that specifies the valueInTextbox attribute
    var graphicFeature = $create(ESRI.ADF.Graphics.GraphicFeature, { "id": graphicFeatureGroupID + "_" + graphicCount,
        "geometry": geometry, "attributes": attributes
    });

    // Add the graphic to the group
    graphicFeatureGroup.add(graphicFeature);
}

Thanks
Lala Rabari

Re: Drag Graphics Point and Drop at New Location

BjørnSandvik — Sat, 11 Dec 2021 15:04:36 GMT

Hi Derek,

I tried your example, but I'm not able to move the marker after it's been hidden (by panning the map). Do you know how to fix it?

Bjørn

There's an easier way to do this. I think the code below was originally posted in the old forums but I've hung on to it for a while:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <title>Moving a marker</title> 
    
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/tundra/tundra.css"> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    
    <script type="text/javascript"> 
      dojo.require("esri.map");
      dojo.require("dojox.gfx.move");
 
      dojo.addOnLoad(init);
 
      var map;
      
      function init() {
        map = new esri.Map("map");
        dojo.connect(map, "onLoad", onMapLoad);
        
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(tiledMapServiceLayer);
      }
      
      function onMapLoad() {
        var geometry = map.extent.getCenter().offset(0, 15);
        var symbol = new esri.symbol.SimpleMarkerSymbol().setColor("red");
        var graphic = new esri.Graphic(geometry, symbol);
        
        // Add a graphic
        map.graphics.add(graphic);
 
        // Make the shape moveable
        var dojoShape = graphic.getDojoShape();
        var moveable = new dojox.gfx.Moveable(dojoShape);
        
        // Update the geometry at the end of move
        var moveStopToken = dojo.connect(moveable, "onMoveStop", function(mover) {
          // Get the transformation that was applied to 
          // the shape since the last move
          var tx = dojoShape.getTransform();
          
          var startPoint = graphic.geometry;
          var endPoint = map.toMap(map.toScreen(startPoint).offset(tx.dx, tx.dy));
          
          // clear out the transformation
          dojoShape.setTransform(null);
          
          // update the graphic geometry
          graphic.setGeometry(endPoint);
          
          // You can find quite a bit of information about
          // applying transformations to Dojo gfx shapes in this
          // document:
          // http://docs.dojocampus.org/dojox/gfx#coordinates-and-transformations
        });
      }
    </script> 
 
  </head> 
  <body class="tundra"> 
    <p> 
    </p> 
 
    <div id="map" style="width:700px; height:500px; border:1px solid #000;"></div> 
  </body> 
</html>

Re: Drag Graphics Point and Drop at New Location

Joachim_EckboJuell — Sat, 11 Dec 2021 15:04:39 GMT

Hi Bjørn,

Yes, you're right. The "moveable" part disappear when the graphic leaves the visible area, and then enters again. That is probably because the API does some internal optimization(?) when graphics are not visible.

I tried to set the dojo shape moveable on "mouse over" on the graphics layer, and then remove the moveable stuff on "mouse out". But I was never able to remove the moveability of the shape (the only method I found was destroy, but that didn't seem to work). So the graphic just started moving x times faster than the mouse for each time I hovered the graphic.

So I ended up with a similar code as above, but with the graphic moving when the mouse moves. This is probably more CPU-heavy, and the code has some weeknesses (eg. if the mouse up event is never fired due to the mouse moving too fast). But its a starting point.

 dojo.connect(this._glStops, "onMouseDown", this, function (event) {
            this._moveableStop = event.graphic;
            this.map.disableMapNavigation();

            this._moveableStopLink = dojo.connect(this.map, "onMouseDrag", this, function (event) {
                this._moveableStop.setGeometry(event.mapPoint);
            });
        });

        dojo.connect(this._glStops, "onMouseUp", this, function (event) {
            this._moveableStop.setGeometry(event.mapPoint);
            this.map.enableMapNavigation();

            if (this._moveableStopLink) {
                dojo.disconnect(this._moveableStopLink);
                this._moveableStopLink = null;
            }
        });

Good luck with the travel planner.

Re: Drag Graphics Point and Drop at New Location

Roman_Net_Follower — Fri, 15 Jul 2011 19:29:42 GMT

Hi, everyone!
In my project I've had to implement the drag'n'drop functionality for graphic object using ArcGIS JavaScript API. Probably it will be useful for somebody. It's shown in my blog here - http://dotnetfollower.com/wordpress/2011/07/arcgis-javascript-api-how-to-implement-dragndropping-of-pushpin/
Thanks!

Re: Drag Graphics Point and Drop at New Location

JohnCorrea — Tue, 31 Jul 2012 16:36:26 GMT

Hey nice work on this example. There are some annoying discrepancies that can be easily fixed with an extra variable and a control statement. This will allow the user to go pack to panning after clicking and dragging while also not moving the point when they are off the graphic when actually attempting to pan.

At the top add

var clicked = false;

Then for the holdGraphic and releaseGraphic methods add

function holdGraphic(evt) {
    clicked = true;
    map.disablePan();
    graphic = evt.graphic;
    graphic.setSymbol(dragSymbol);
    }

function releaseGraphic(evt) {
    if (clicked == true) {
    graphic.geometry = evt.mapPoint;
    graphic.setSymbol(symbol);
    map.disablePan();


    /* code here is not relevant
    formPoint = esri.geometry.webMercatorToGeographic(evt.mapPoint);
    document.getElementById("Longitude").value = Math.round(formPoint.x * 100000) / 100000;
    document.getElementById("Latitude").value = Math.round(formPoint.y * 100000) / 100000;
    * /
    }

clicked = false;
map.enablePan();

}

Re: Drag Graphics Point and Drop at New Location

AdrianMarsden — Wed, 03 Oct 2012 05:58:51 GMT

Arrggh, I bookmarked this thread because the demo http://help.arcgis.com/en/webapi/javascript/arcgis/samples/graphics/graphics_extent_query.html mentioned earlier seemed useful, but that is now 404ing. Anyone know what has happened to it?

Re: Drag Graphics Point and Drop at New Location

KenMorefield — Wed, 03 Oct 2012 19:46:24 GMT

Anyone know what has happened to it?

I believe the sample you are referring to is found here: SAMPLE

Ken

Re: Drag Graphics Point and Drop at New Location

AdrianMarsden — Thu, 04 Oct 2012 07:20:02 GMT

That's it - Cheers.

Re: Drag Graphics Point and Drop at New Location

Vermiedelos_reyes — Sun, 18 Nov 2012 13:07:48 GMT

Hi guys,

Glad to see this thread. Its very informative especially to newbies like me. Can you also help me with my problem? I need to create a Marker graphics with label on it. I understand that to be able to do these, I need to create two graphic object to be added to the map graphic layer. But my problem is i need to place several 'marker' graphics and its corresponding 'text' graphics inside the map. Can you please tell me how to work on this. I badly need your help.

Re: Drag Graphics Point and Drop at New Location

AshishRao — Wed, 11 Feb 2015 12:46:33 GMT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>ArcGIS Drag'n'drop sample</title>

<%-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" />

var map = null;

var pushpin = null;

var pushpin2 = null;

dojo.require("esri.map");

dojo.addOnLoad(function() {

dojo.style(dojo.byId("map"), { width: dojo.contentBox("map").w + "px", height: dojo.contentBox("map").h + "px" });

esriConfig.defaults.map.slider = { right: "10px", top: "10px", width: null, height: "100px" };

map = new esri.Map("map", { wrapAround180: true, nav: false });

// map = new esri.Map("map", {basemap: "topo", center: [71.55, 21.55], zoom: 5,sliderStyle: "small"});

// pushpins will be added after map layers is loaded

dojo.connect(map, "onLoad", function() {

var mapPoint = new esri.geometry.Point(-13042885, 4033247, new esri.SpatialReference({ wkid: 102100 }));

pushpin = new Pushpin(map, "http://static.arcgis.com/images/Symbols/Basic/AmberBeacon.png", 25, 25, mapPoint);

var mapPoint2 = new esri.geometry.Point(-13042885, 2033244, new esri.SpatialReference({ wkid: 102100 }));

pushpin2 = new Pushpin(map, "http://static.arcgis.com/images/Symbols/Basic/AmberBeacon.png", 25, 25, mapPoint2);

});

var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

map.addLayer(layer);

//var tmpPushpinCurretnLocation = pushpin2.GetCurrentLocation();

//pushpin.Dispose();

//pushpin2.Dispose();

});

</script>

</head>

</form>

</body>

</html>

DragAndDrop.js

// represents wrapper for graphic object to provide drag'n'drop ability

// map - instance of esri.Map

// graphic - instance of esri.Graphic

function DragableGraphic(map, graphic) {

this._map = map; // parent map

this._graphic = graphic; // moveable graphic object

this._currentLocation = graphic.geometry; // current location of graphic object

this._isInUse = false; // true if graphic object is in dragging

this._onMouseDownHandler = null; // pointer to onMouseDown event handler

this._onMouseUpHandler = null; // pointer to onMouseUp event handler

this._onMouseDragHandler = null; // pointer to onMouseDrag event handler

this._onMouseDragEndHandler = null; // pointer to onMouseDragEnd event handler

// initializes object

this._init = function () {

// bind to onMouseDown that fires when graphic object is clicked on

if (this._onMouseDownHandler == null)

dojo.connect(this._map.graphics, "onMouseOver",this, function (evt) {

if (evt.graphic === this._graphic) {

evt.graphic.getDojoShape().moveToFront();

}

}); //End onMouseOver //added

dojo.connect(this._map.graphics, "onMouseOut", this, function (evt) {

if (evt.graphic === this._graphic) {

evt.graphic.getDojoShape().moveToBack();

}

}); //End onMouseOut //added

this._onMouseDownHandler = dojo.connect(this._map.graphics, "onMouseDown", this, this.onMouseDown);

}

// releases resources used by object

this.Dispose = function() {

// disconnect from onMouseDown

if (this._onMouseDownHandler != null) {

dojo.disconnect(this._onMouseDownHandler);

this._onMouseDownHandler = null;

}

// if graphic object is in use, release it

if (this._isInUse) {

this._map.enableMapNavigation(); // enable default left button behavior

this.unbindDragNDropEvents(); // disconnect from drag'n'drop events

this._isInUse = false; // mark graphic object as not in use

}

// binds to drag'n'drop events

this.bindToDragNDropEvents = function() {

// bind to onMouseDrag that fires when graphic object is being dragged

if (this._onMouseDragHandler == null)

this._onMouseDragHandler = dojo.connect(this._map, "onMouseDrag", this, this.onMouseDrag);

// bind to onMouseDragEnd that fires when graphic object is dropped

if (this._onMouseUpHandler == null)

this._onMouseUpHandler = dojo.connect(this._map.graphics, "onMouseUp", this, this.onMouseUp);

}

// unbinds from drag'n'drop events

this.unbindDragNDropEvents = function() {

// disconnect from onMouseDrag

if (this._onMouseDragHandler != null) {

dojo.disconnect(this._onMouseDragHandler);

this._onMouseDragHandler = null;

}

// disconnect from onMouseUp

if (this._onMouseUpHandler != null) {

dojo.disconnect(this._onMouseUpHandler);

this._onMouseUpHandler = null;

}

// fires when graphic object is clicked on

this.onMouseDown = function (event) {

// if graphic object isn't in use yet, start using it

this._isInUse = false; //added

if (!this._isInUse) {

this._isInUse = true; // mark graphic object as in use

this._map.disableMapNavigation(); // prevent default left button behavior

if (event.graphic == this._graphic) { //added

this.bindToDragNDropEvents(); // connect to drag'n'drop events

}

if (event.button != 0) //old is 1 ,0 is added// ignore if clicked button is not a left one

return;

// ignore if clicked graphic object is not an object contained in the current DragableGraphic-object

if (event.graphic != this._graphic)

return;

}

// fires when graphic object is dropped

this.onMouseUp = function (event) {

// if graphic object is in use, release it

if (this._isInUse) {

this._currentLocation = event.mapPoint; // preserve end graphic object location

this._graphic.setGeometry(event.mapPoint); // move graphic object to the end location

this._map.enableMapNavigation(); // enable default left button behavior

if (event.graphic == this._graphic) { //added

this.unbindDragNDropEvents(); // disconnect from drag'n'drop events

}

this._isInUse = false; // mark graphic object as not in use

}

if (event.button != 0) //old is 1 ,0 is added// ignore if clicked button is not a left one

return;

// ignore if clicked graphic object is not an object contained in the current DragableGraphic-object

if (event.graphic != this._graphic)

return;

}

// fires when graphic object is being dragged

this.onMouseDrag = function(event) {

if (this._isInUse) {

this._currentLocation = event.mapPoint; // preserve a new graphic object location

this._graphic.setGeometry(event.mapPoint); // move graphic object to the new location

}

this._init(); // initialize object

}

// represents wrapper for DragableGraphic

// map - instance of esri.Map

// imgUrl - string-based image url

// height - image height in pixels

// height - image width in pixels

// mapPoint - instance of esri.geometry.Point

function Pushpin(map, imgUrl, height, width, mapPoint) {

this._map = map; // parent map

this._initialLocation = mapPoint; // initial location of pushpin

this._height = height; // pushpin image height

this._width = width; // pushpin image width

this._imgUrl = imgUrl; // pushpin image url

this._dragableGraphic = null; // reference to DragableGraphic object

// initializes object

this._init = function () {

// create PictureMarkerSymbol

var symbol = new esri.symbol.PictureMarkerSymbol(this._imgUrl, this._width, this._height);

// create graphic object based on symbol

var graphic = new esri.Graphic(this._initialLocation);

graphic.setSymbol(symbol);

// add graphic object to the map

this._map.graphics.add(graphic);

// create DragableGraphic object to provide drag'n'drop ability for graphic object

this._dragableGraphic = new DragableGraphic(this._map, graphic);

}

// releases resources used by object

this.Dispose = function() {

if (this._dragableGraphic != null) {

// remove graphic object from the map

this._map.graphics.remove(this._dragableGraphic._graphic);

// call Dispose of DragableGraphic

this._dragableGraphic.Dispose();

}

// returns the current location of Pushpin on the map

this.GetCurrentLocation = function() {

if (this._dragableGraphic != null)

return this._dragableGraphic._currentLocation;

else

return null;

}

this._init(); // initialize object

}