Drag element and scroll viewport

Responsive
1

I have a scene that is vertically longer than the viewport. when scrolling to the middle of the scene I have a draggable element (On Drag - Control element position).

Now, when I drag my element to the top of the viewport I'd like the page to scroll up so I can drop my element somewhere at the top of the page. And I'd like to also be able to drag the element to the bottom of the viewport and activate scrolling, so I can drop the element somewhere at the bottom of the page.

How can I achieve this?

Right now nothing happens when I drag my element to the top/bottom/outside of the viewport.

2

I don't have a great answer for this unfortunately. What you're describing is commonly called "autoscroll" (or "auto scroll"). I've had to make use and implement some of this for Hype's UI itself; macOS doesn't make this too hard to do. Unfortunately to the best I can tell the native HTML dragging doesn't support this, and Hype's dragging code doesn't either.

You may be able to search online and find some drag/drop libraries that have autoscroll. If you find some, they usually aren't too hard to integrate with a little bit of code. It would probably consist of steps like:

  • Turn on "Position with CSS left/top" in the Document Inspector
  • Give a draggable element an ID
  • Add the JavaScript dragging library files or src url to the head html (this may be done automatically if you drag the libraries into Hype's resources library)
  • Add some code with the On Scene Load handler that ties the element ID to the dragging library

But I haven't used any to know what works best.

3

In theory you can force a scroll by listening to the drag event and finding a y coordinate in the event to scrollTo(x,y).

It is not always easy to figure out which y coordinate works best for your setup in Hype.

Just to show you can make a scene scroll like this. here is a scene 2000 px deep.
The closest y coordinate only hits 900+ px when at the bottom , which is the screenY

So I multiplied it.

This solution is not the best but does show it can be done ( and may be improved )

But as @Jonathan suggests, a library may be a better approach as a lot of the math, coding and hard work is likely already done.

scrollToDrag.hype.zip (20.8 KB)

1 Like
4

Finally back at my desk! Thanks for your replies :slight_smile:

I stumbled upon some code, which (mostly) solved my problem. By using window.scrollBy I can get the scroll going, when dragging to the edge of the viewport. Then I remembered that my project will be embedded in an iFrame, and here my own solution won't work. At least not without some modifications. I'll have to look into that.

But I will definitely try Marks solution, as it would work well in my project :slight_smile:

Here's the code I'm using at the moment (on the drag event)

		dragElement = element.getBoundingClientRect();
		if(dragElement.top < 0){
			window.scrollBy(0, -10);
		}
		if(dragElement.bottom > window.innerHeight){
			window.scrollBy(0, 10);
		}
3 Likes