VEShape.Draggable Property

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

A Boolean value indicating whether the VEShape icon on the map can be dragged using the mouse.

VEShape.Draggable = value;

Remarks

The default value of the Draggable property is false.

Pushpins and the icons corresponding to polygons and polylines are can be dragged. However, polygon lines and polyline lines cannot be dragged.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Shape Dragging Sample</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         
         var map     = null;
         var pushpin   = null;

         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();
           
            // Create the pushpin
            pushpin = new VEShape(VEShapeType.Pushpin, map.GetCenter());
            
            // Allow the pushpin to be dragged
            pushpin.Draggable = true;

            // Assign the shape drag event handlers
            pushpin.onstartdrag = StartDragHandler;
            pushpin.ondrag = DragHandler;
            pushpin.onenddrag = EndDragHandler;

            // Show an info box to indicate the pushpin can be dragged.
            pushpin.SetTitle("Drag me!");
            map.AddShape(pushpin);
            map.ShowInfoBox(pushpin);

         }

         function StartDragHandler(e)
         {
            document.getElementById("txtDragStatus").value = "Pushpin drag has started.";
         }

         function DragHandler(e)
         {
            document.getElementById("txtDragStatus").value = "Pushpin drag is occurring.";
         }

         function EndDragHandler(e)
         {
            document.getElementById("txtDragStatus").value = "Pushpin drag has ended.";
         }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
      <input id="txtDragStatus"/>      
   </body>
</html>

See Also

Reference

VEShape.onstartdrag Event
VEShape.ondrag Event
VEShape.onenddrag Event