question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:3
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
zdilacommented, Jul 25, 2020

@FadilEldin because then icon changes on drag end not on drag start.

3reactions
jpbecottecommented, Jun 15, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google Maps drag and dragend event listeners won't work if ...
I am using your code only. I wanted dragend event to get the location stored of the marker in database. I added dragend...
Read more >
Drag operations - Web APIs - MDN Web Docs - Mozilla
Starting a drag operation​​ In this example, we add a listener for the dragstart event by using the addEventListener() method. When a user...
Read more >
Map | Maplibre gl js - Documentation Portal - MapTiler
The map's BoxZoomHandler, which implements zooming using a drag gesture with the Shift key pressed. Find more details and examples using boxZoom in...
Read more >
Draggable Directions | Maps JavaScript API
This example demonstrates the use of the DirectionsService object to fetch directions between draggable markers. Read the documentation.
Read more >
https://www.tisa.ch/wp-content/plugins/wp-google-m...
List your map markers in the four ways; basic list, basic table, carousel, ... simply go to Appearance->Widgets and drag the "WP Google...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found