Dragging selected text to copy/move it within a webpage?

I'd like to replicate the behaviour of dragging selected text, to move it in/into a text input or textarea, within a webpage.

I'd like to know if it's possible (using a mouse drag of a selection) to:

1. copy/move selected text from one text input to another
2. copy/move selected text within an input to another position (e.g.)
3. copy/move selected text from a header/paragraph (i.e. non-input) to an input/textarea.
4. populate the drag text programmatically using javascript

e.g. The green arrow demonstrates the behaviour working, however I'd like to make it work within a webpage (red arrow).

All google suggestions I've found so far, relate to dragging and dropping html elements, not text.

I'm using chrome, but bonus points if it's a cross browser solution. Don't mind if solution is html, css or javascript.

Similar question, but for visual studio code - not a webpage.