ngDraggable | Drag and drop module for Angular JS | Widget library

I solved my issues with this question which I also answered myself.

How to use, dragstart, dragend, click, mouseup, mousedown with three divs together and keep them all separate but equal

I was able to use ngDraggable's features to get the info I wanted then change the translate(x,y) quite easily.

1. Where I have placed ngDraggable, add this in the draggable element on the HTML

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

This is a very common issue when it comes to updating charts. Please add the following code at the start of your updateCharts(buttonClick: string) method.

I found where the issue was coming from and hope this helps someone. Inside ngDraggable module there is a preventDefault function within mouseDown event.

Just comment that line out and your input boxes inside your draggable elements in HTML will become editable.

Angular throws this error when it fails to load any module. In your example, there is a typo in ui.router. You added extra blank space before the module name which may throwing error.

Edit:

The error you copied shows that you are using module named as sun.scrollable is not loaded. Are you loading required module js file??

You can use the nite package, you will have to first get the native google maps object from agm like this, in your component.ts:

Template reference variables are unique within enclosed view. *ngFor directive create embedded view for each item so that template reference variable is unique there.

So just try the following:

I was able to resolve by adding ng-drag-scroll verticalScroll="true" to use this on your draggable elements

Here is the updated plunkr: http://plnkr.co/edit/IWym7S3T0NwtInQRLjzJ?p=preview