Reordering a list on mobile web that is larger than the screen height

In my app users can add items to lists and reorder the index of the listitems by whichever criteria they like. The users of this app are not tech savvy, and I would like to avoid any technical input to achieve this.

example of list element

Now, on desktop reordering of the items is not such an issue. However, I can't decide on a 'best' way to do this on mobile web. The main issue being that the lists could potentially be larger than the screen itself, so when applying drag and drop, how will a user scroll and move an item?

My initial idea is to make a mode switch. See second picture below. When the user presses move item all other items make space for the first item to be dragged down (or up) (see third picture).

move item mode moving one item

My question is: How would I ensure a user is able to drag and drop items, but is still able to scroll the list on mobile web?

Or if you think this is the wrong approach: Do you know a better approach to let users reorder lists on mobile web?