VEShape.ondrag Event

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

Occurs when a shape is being dragged across the map.

VEShape.ondrag = function_name;

Return Value

A ShapeDragEventArgs object, which has the following properties:

Property Description

Shape

The VEShape object that fired the event.

LatLong

The current VELatLong of the shape.

Remarks

The ondrag event occurs when the user moves the mouse and the left mouse button is pressed down.

The ondrag event only occurs after the VEShape.onstartdrag Event has occurred.

For the ondrag event to occur, the VEShape.Draggable Property must be set to true.

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.Draggable Property
VEShape.onstartdrag Event
VEShape.onenddrag Event