draggable.js | Make your DOM elements

You either need to import the model and use the url you get from that (url-loader), or put it into the public folder. Your path points nowhere in the bundled output.

One more thing, it's @react-three/drei and useGLTF(url).

I was able to determine that the "moreOptions" element is inside of the iFrame, I edited my original message to pull in the full HTML for the page. I see that the "IR" element is outside of the iFrame.

To access the elements located inside the tag, we have to find the iframe tag first, then access the elements. You try to use the following code to get elements from the Iframe:

Unfortunately svgjs.draggable.js doesn't have a definition type file so you can't import it with the ES6 import/export like svg.js. the definition type file is the file that has the extension d.ts which you can find in the root of the library.

Also in our case svgjs.draggable extends svg.js. So we need to import svgjs.draggable after svg.js. So how to do that? The solution is to import them both either from index.html or using angular-cli.json. I'll choose the latter one.

I have my solution for working with non npm/module library.

First I will use jsdelivr to serve file from directly from Github. For example https://cdn.jsdelivr.net/npm/svg.js@2.7.1/dist/svg.min.js.

Then I use script.js to load them.

Please follow below stpes.

1. First In OnConnectedAsync(), take static list object and store user connectionId with username.
2. you need to use OnDisconnectedAsync(). so whenever your any user get offline, you will get call in this method and you can get connectionId in this method, find username from your list.
3. Now take one schema where you can manage, Pending to send message user List. add useraname who is getting offline.
4. Now, When any user is connecting, first check whether that username is exist in PendingToSendMessageUserList schema.
5. If yes, then first send him all pending message and then delete username from that schema.

Hope you will understand, you need to implement it technically.

I was able the solve the problem by creating a nested group, putting the path element in the nested group, and then making the nested group draggable rather than the individual element.

Hence it hybrid and an old angularjs without modules

You have stated that you are not using modules but you in fact you are.

The tsconfig.json you have shown indicates that you have configured TypeScript to transpile your code to AMD modules. Furthermore, your index.html is set up accordingly as you are in fact using an AMD loader, namely RequireJS.

All of this is well and good. You should use modules and doing so with AngularJS is not only possible but easy.

However, ts-node, which is great by the way, takes your TypeScript code, and then automatically transpiles and runs it. When it does this, it loads the settings from your tsconfig.json, instantiates a TypeScript compiler passing those settings, compiles your code, and then passes the result to Node.js for execution.

NodeJS is not an AMD module environment. It does not support AMD and does not provide a define function.

There are several valid ways to execute your tests.

One option is to use different configuration for ts-node, specifically, tell it to output CommonJS modules instead of AMD modules. This will produce output that Node.js understands.

Something like

The exact functionality you are looking for can be found here: https://jqueryui.com/draggable/#snap-to

Check out the last 2 boxes that snap to a grid

While I did not solve my question in a way that I was originally thinking, I did create a solution.

I rewrote the function so the id of the level 1 parent is always available in it's (nested) children. When a child updates, it emits an event while mentioning that id. On the main element, a Vue method then starts at that id and works its way down all its children to determine the status. When anything changes, I just emit that change again.