Leaflet: `drag` event listeners get lost when changing marker icon during drag

[klaftertief]

In 1.0.0-beta.2 one could call setIcon() (using a L.divIcon()) on a marker in the drag listener and the listener gets called on each event. A dragend listener also gets called. See http://jsbin.com/jegoqocebu/1/edit?html,js,console,output

In 1.0.0-rc.1 with the same code the listener gets called only on the first drag event (but for each new drag) and the dragend listener doesn't get called at all. See http://jsbin.com/tudezarose/2/edit?html,js,console,output

Is this related to #4458 and expected?

[codeofsumit]

Here's another JS fiddle for this issue:
http://jsfiddle.net/LnzN2/190/

[IvanSanchez]

I predict this will be hard to fix properly. The problem probably lies around https://github.com/Leaflet/Leaflet/blob/master/src/layer/marker/Marker.js#L281 , where the code for L.Marker re-attaches its this._draggable handler and tries to keep the state intact.

Possibly related to #2578 - it enabled keeping the draggable/undraggable state of the marker, but not keeping the whole state while dragging.

[IvanSanchez]

Maybe, just _maybe_ this bug can be fixed by calling L.Marker.dragging._onDown() from L.Marker._initInteraction() if L.Marker.dragging._startPoint is set. Sounds hackish :grimacing:

If anybody has time to try this idea, pull requests are always welcome.

[IvanSanchez]

I've got word that @serdarkacka wants to help with this one, so I'll wait for a PR.

[zdila]

I wanted to report simmilar issue but found this one. My testcase is at http://jsfiddle.net/wpjcn2r0/1/. Run it then start draging the marker for more than 5 seconds and when the ichon chages the dragging stops.

[genofire]

Got something simulary by add again to a layer:
https://jsfiddle.net/jb9er52w/7/

it disable dragging complete :sob:

[jpbecotte]

I had a similar issue and I fixed it by extending DivIcon to handle a setHTML method. Changing the innerHTML of the div without recreating the DivIcon solves the issue.

  const DynDivIcon = L.DivIcon.extend({
    createIcon: function (oldIcon) {
      const div = L.DivIcon.prototype.createIcon.call(this, oldIcon);
      this._div = div;
      return div;
    },

    setHTML(html) {
      this._div.innerHTML = html;
    },
  });

Maybe this setHTML method should be added to DivIcon. If you want me to submit a PR, let me know.

[genofire]

Wow still not solved, after three years.

[qrosmeli]

I'm having the same problem. Is anyone checking on this?

[FadilEldin]

On @codeofsumit code:
http://jsfiddle.net/LnzN2/190/
I modified
marker.on('drag', function() {
to
marker.on('dragend', function() {
And the marker turns blue after drag.
Why this cannot be an acceptable workaround?

[zdila]

@FadilEldin because then icon changes on drag _end_ not on drag _start_.