Resize Data Grid Column by Drag & reszie

Anvil Q&A
9

Be really careful with addEventListener and removeEventListener when using a method as a callback.
In your code the event listeners never get removed
If you add print statements on the first line of each method
you might find that as you drag and then re-drag the same elements,
you’ll get more and more print statements

How to fix

Short version:
add the following lines to your __init__ method


self.on_drag_start = self.on_drag_start
self.on_drag_end = self.on_drag_end
self.on_drag = self.on_drag

Explanation

in JavaScript an event listener is only removed if it is identical to an existing event listener

In a client/server side repl try

>>> class Foo:
        def bar(self):
            pass
>>> foo = Foo()
>>> foo.bar == foo.bar
True # equal
>>> foo.bar is foo.bar
False # but not identical
>>> foo.bar = foo.bar
>>> foo.bar is foo.bar
True # now identical

The above snippet demonstrates that methods on instances are equal but not identical
If we do the assignment you see that we can make methods identical

This is really subtle and has caught me out a number of times!

Related discussion

1 Like