CODEWITHSUNDEEP
javascriptjquerybing-maps
Mihir Shah
Mihir Shah

Reputation: 988

Bing Map pin's dragend called successfully, but Bing Map move event continues

I have used Bing Maps AJAX Control, Version 7.0. and shows the Pins on map. the requirement is like, user can drag and drop the pin and when pin gets drop, it should move to its actual location.

now the issue is, when pin's dragend event called, pin successfully set to its original location, but the mouse is not released and when mouse move, map also gets moved.

code is as below :

var isPinDragged = false;

Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
Microsoft.Maps.Events.addHandler(pin, 'drag', dragDetails);
Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);

function startDragDetails(e) {
    lastLocation = e.entity.getLocation();
    currentLatitude = e.entity._location.latitude;
    currentLongitude = e.entity._location.longitude;
    isPinDragged = false;

    $(e.entity.cm1002_er_etr.dom).find("img").removeClass("droppable");
}

dragDetails = function (e) {
   isPinDragged = true;
};

endDragDetails = function (e) {
    if (isPinDragged) {
        isPinDragged = false;
        $(e.entity.cm1002_er_etr.dom).find("img").addClass("droppable");
        e.entity.setLocation(new Microsoft.Maps.Location(currentLatitude, currentLongitude)); //update pin: move back to old position
    }
};

Update: I don't know, this info. how much helps to resolve. My pin creation is dynamic, there would be N no. of pins as per user logged in.

Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style',
{
    callback: function () {
        map = new Microsoft.Maps.Map(document.getElementById("divDailyCashMap"), mapOptions);

        var center = map.getCenter();
        var loc = null;
        var pin = null;

        var pinLayers = new Microsoft.Maps.EntityCollection();
        map.entities.push(pinLayers);

        var infoboxLayers = new Microsoft.Maps.EntityCollection();
        map.entities.push(infoboxLayers);

        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayers.push(pinInfobox);

        $.each(codes, function (index, item) {
            loc = new Microsoft.Maps.Location(item.Latitude, item.Longitude);
            pin = new Microsoft.Maps.Pushpin(loc, { text: '', draggable: true });
            pin.Title = item.Title;
            pin.Description = item.CodeDescription;

            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
            Microsoft.Maps.Events.addHandler(pin, 'dragstart', startDragDetails);
            Microsoft.Maps.Events.addHandler(pin, 'drag', dragDetails);
            Microsoft.Maps.Events.addHandler(pin, 'dragend', endDragDetails);

            Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);
            Microsoft.Maps.Events.addHandler(map, 'mousemove', mousemoveDetails);

            pinLayers.push(pin);
                 $(pin.cm1002_er_etr.dom).find('img').addClass("droppable").attr({ "data-pinid": item.Code, "data-lat": item.Latitude, "data-long": item.Longitude });
        });
    }
}

Upvotes: 0

Views: 992

Answers (1)

Nicolas Boonaert
Nicolas Boonaert

Reputation: 2952

In your dragDetail() function, try:

e.handled = true;

It will tell the event engine that other underlying events should not be fired. You can also try to add this if it does not work:

return false;

Upvotes: 1

Related Questions