I need to create a draggable popup layer. Help.

I need to be able to create a popup that is mouse/touch draggable.
It needs to be prevented from being able to be moved out of the viewport.

I've tried for hours.
I'm hoping somebody knows of existing code or knows how to do it.

Help would be appreciated.

 

Hi
Looking for like this?
https://ej2.syncfusion.com/aspnetmvc/Dialog/Draggable#/material3

 

ypkush: Thanks but no, that's a drag function. I need something that will make the element follow the mouse, not a drag.
When I mouseup the element needs to stop where ever it is, not a drop.
Also, when the mouse runs out of the viewport the element needs to recognize that as a mouse up and not take the element out of the viewport.

 

This may help for you, here is the example
https://codepen.io/lfry/pen/AEqKRM
https://www.kirupa.com/canvas/follow_mouse_cursor.htm

 

ypkush: Thanks again for your response.
Still, this isn't quite it.

I did learn of this function from it: requestAnimationFrame which I believe I can use.

I can make an element follow a mouse and I can make it stop and stay on mouseup (not a drop).
BUT when the mouse goes out of the viewport the element flips out.
I want it to follow a page scroll but when the mouse is out of the viewport and off the page the element should just stop.

I'm hoping requestAnimationFrame will help with the page scroll problems at least and that *may* solve the whole problem.

Again, thanks for your help.

 

Try these:

https://jsfiddle.net/nagaraju_agan/b12aLu87/

https://jsfiddle.net/lesson8/SYwba/

https://jsfiddle.net/ydchauh/4cbk0sq5/

https://stackoverflow.com/questions/7143806/make-an-image-follow-mouse-pointer

When I need a code, I search: jsfiddle blah blah or stackoverflow blah blah