Drag events fired on click of pushpin on bingmap

I attached multiple events (click, dragstart, dragend) events on pushpin but the problem is, when I click pushpin on bing map it calls both drag event first. I want to restirct drag events when click on pushpin and it should be fired when we drag pushpin on map.

I tried attach multiple event handler on same pin but it's not working.

Sample code:

    <html>
      <head>
          <script charset="UTF-8" type="text/javascript"   src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script>
        var pinInfoBox;  //the pop up info box
        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        var pinLayer = new Microsoft.Maps.EntityCollection();
        var apiKey = "Key";

        function GetMap() {

            map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });

            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(pinInfobox);


            for (var i = 0 ; i < 10; i++) {
                //add pushpins
                var latLon = new Microsoft.Maps.Location(Math.random() * 180 - 90, Math.random() * 360 - 180);
                var pin = new Microsoft.Maps.Pushpin(latLon, { draggable: true });
                pin.Title = name;//usually title of the infobox
                pin.Description = "blahblahblah, " + i; //information you want to display in the infobox
                pinLayer.push(pin); //add pushpin to pinLayer
                Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
                Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
                Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);
            }

            map.entities.push(pinLayer);
            map.entities.push(infoboxLayer);

        }

        startDragDetails = function (e) {
            console.log("Start Latitude/Longitude: " + e.entity.getLocation());
        };
        endDragDetails = function (e) {
            console.log("End Latitude/Longitude: " + e.entity.getLocation());
        };

        function displayInfobox(e) {
            console.log("click");
            pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
            pinInfobox.setLocation(e.target.getLocation());
        }

        function hideInfobox(e) {
            pinInfobox.setOptions({ visible: false });
        }
    </script>

    <style>
        #map {
            position: absolute;
            top: 20px;
            left: 10px;
            width: 700px;
            height: 500px;
            border: #555555 2px solid;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="map">
    </div>
</body>
</html>

Solution

I stored the flag value "true" in global variable when it comes to drag method and checking the same flag value on end drag method to execute the code that is needed when pins are dragged.

So if we click pins, it calls the dragging methods but won't execute code that we don't need on click event.