ExternalError: ReferenceError: autoScroll is not defined on using js

Anvil Q&A
1

I have cards on an app that can be dragged around the screen, however the drop_zones I’m aiming for are sometimes out of view, so I wanted to make the cards cause the page to scroll as they get dragged down or up.

I have added a file called drag_scoll.js to the assets section with the following code:

window.autoScroll = function(e) {
  var scrollSpeed = 20; // Adjust this to change the speed of the scrolling
  var edgeSize = 100; // Adjust this to change how close to the edge scrolling starts
  if (e.clientY < edgeSize) {
    window.scrollBy(0, -scrollSpeed);
  } else if (window.innerHeight - e.clientY < edgeSize) {
    window.scrollBy(0, scrollSpeed);
  }
};

and, tt is being called in the on_drag_start function using this code:

def on_drag_start(self, event):
    """This method is called when the drag operation is started"""
    # Get the Anvil component associated with the DOM node being dragged
    dragged_component = event.target.anvilComponent

    # Set the ID of the Push row as the data being transferred
    event.dataTransfer.setData('text', dragged_component.push_id)
    # Set the old global push name as the data being transferred, and pass over the component from where it was dragged
    event.dataTransfer.setData('text/old_global_push_name', 'Ungrouped Pushes')

    # Store the dragged item at the form level
    anvil.get_open_form().dragged_item = {'Push': dragged_component.item['Push'], 'interviewee_name': dragged_component.item['interviewee_name'], 'story_number': dragged_component.item['story_number'], 'id': dragged_component.push_id}
    #get the item moving if it goes too close to the edge of the form
    anvil.js.call_js("window.addEventListener('dragover', autoScroll)")```

When I pick up a card and drag it toward the bottom of the screen I get the following error:


ExternalError: ReferenceError: autoScroll is not defined
at PushDragDropForm, line 129

Which is triggered by this line:

anvil.js.call_js("window.addEventListener('dragover', autoScroll)")

The funny thing is that the card WILL drag and it WILL scroll the form downwards. It WON’T scroll upwards (not sure why), and it keeps printing these errors to the console.

I saw another forum post where this was suggested to have been a bug, but I’m not sure whether this issue is the same or not.

Is there something I’m doing wrong?

P.S. pre-empting this being solved, I’m also calling:

  def on_drag_end(self, event):
    """This method is called when the drag operation is ended"""
    anvil.js.call_js("window.removeEventListener('dragover', autoScroll)")

So if that’s also likely to cause problems, please let me know.

2

an asset isn’t live in your app until you’ve added it to the page somehow

in native libraries you can do

<script src="_/theme/drag_scoll.js" defer type="text/javascript"></script>

I would also change the code

from anvil.js import window

# no need for this
# anvil.js.call_js("window.addEventListener('dragover', autoScroll)")
# just do
window.addEventListener("dragover", window.autoScroll)

And actually i’d get rid of autoScroll from javascript and move it to python

from anvil.js import window

def auto_scroll(e):
    scroll_speed = 20
    edge_size = 100
    if e.clientY < edgeSize:
        window.scrollBy(0, -scroll_speed)
    elif window.innerHeight - e.clientY < edge_size:
        window.scrollBy(0, scroll_speed)

# then later
window.addEventListener("dragover", auto_scroll)
3 Likes
3

Awesome - thanks a lot! This also works on scrolling up, which is perfect.

1 Like