Add drag and drop editor to your Shopify app

Shopify Apps
1

We have an app, where we show an HTML element on the product page.
Today we ask the user to add some code (copy paste) to make our “widget” visible.

To make it more user friendly, we would like to change that to a “drag and drop” editor where they can drop where they want to have their element.
You can see here where Klarna is doing this at 2min mark: https://youtu.be/Lj8QvkRkDxo
We don’t want to build an editor app (Like Shogun), we just want our widget to be added to the product page using a more user-friendly approach.

I’m trying to find how to do this, if there is any JS lib or how this is done?
Drag and drop, examples can be found here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And you can get the current HTML code for the site using: document.documentElement.innerHTML

However, I need to modify the liquid file, not the created HTML code that is genereted from that liquid file.

Any suggestion on how to do this?

2

Found following answer on their site, so guess the use CSS selector (class) and add the element to that using JS:

The Ad position attaches to a CSS selector on the page, which should be a CSS option that is available on all product pages. The chosen CSS selector can be viewed in the CSS section. If dragging and dropping doesn’t find a good CSS selector, you can manually enter an appropriate CSS selector from your page, or if the Ad is already the desired position, review the front end store view and verify that it is working correctly across products.