angular-drag-and-drop-lists | Angular directives for sorting nested lists | Widget library

Problem : trying to simulate drag drop in frontend that uses angular-drag-and-drop-lists (go to detailed description)

Tried :

1.jquery-simulate: Gives following error

Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'.

2.drag-drop-helper.js : click happens on item to be dragged

3.drag_to : nothing happens

Need some more suggestions .

Thanks

jquery-simulate: https://github.com/jquery/jquery-simulate

sorry not able to post link for drag_to and drag-drop-helper.js

I've got an AngularJS (1.6) app written using webpack 3.10. I have an entry file (Application.ts) which creates the module, runs it, and then bootstraps it to the document.

This works fine on the first build, however once I save a change, let webpack watch do its work then refresh the browser, the application hasn't bootstrapped. By putting in console.log near the top of my Application.ts file, it's clear that the entry file isn't being executed.

If I stop the webpack watch process and restart it and refresh the browser, the app bootstraps successfully.

What's strange is that this was working successfully in the past, then suddenly just stopped. I put up with it for a while and it suddenly it started to work again! Then last week it just broke itself again.

Edit 1

So I thought I'd compare the two generated bundles, the first being a bundle on the first run of webpack, and the second the updated bundle after a minute change to a ts file, created via webpack watch.

I'm surprised to see such a huge difference between the two files, given all I did was change protected test: Function; to be protected test2: Function;. I'd expect the two bundles to be virtual identitcal, baring the change I'd just mentioned?

webpack.dev.js

i am using below code. But i am getting error Uncaught Error: [$injector:nomod]. The module name is same. Not sure why i am getting this error. Please help. i checked the syntax, names etc everywhere but could not find any issues. it seems like i missed something simple but not able to figure out where exactly i made a mistake.

I'm using main-bower-files to get files via gulp to a certain folder. But certain css files are missing, even though they are inside bower_components folder.

For example CSS file viewer.css from "pdf.js-viewer" is not copied even though .js file from the same folder is.

Any idea what could be wrong? Any tips appreciated!

The app (AngularJS 1.5.11, https://codepen.io/loenko/pen/qPOWRp) is the group of lists with draggable items (implemented with dnd-list directive from corresponding package https://github.com/marceljuenemann/angular-drag-and-drop-lists).

Items in all the three lists are from the same array of item objects. They are put into the corresponding list by filter on item's 'list' property.

The problem is in sorting of items inside of lists after dragging and dropping of the item. They should be (I want them to be) placed exactly where they're dropped, but they're sorted automatically (dropped item is pushed to the end of the list).

Is there a way to implement such functionality without creating any additional sorting arrays, changing the d'n'd implementation package and changing the data model (it's predefined)?

Anyway, I'll appreciate all the alternative solutions!

The structure of lists is as follows:

I use the angular-drag-and-drop-lists directives to handle drag and drop between lists.

My api data source returns nested lists like so:

I am using druska/native_js_drag_and_drop_helper.js to automate angular-drag-and-drop-lists

Issue : Even after event.dataTransfer.setData(mimeType,angular.toJson(item))

dataTransfer.types is not set or probably not allowed to read in dragstart and drop event

Observation : during manual drag drop dragstart event

I'm using Google's Angular Drag and Drop Lists, but I think the problem is with the underlying HTML5 drag and drop not working with Angular ( v1.6.1 ).

According to MDN ( the note at the bottom, under "Finishing a Drag" ):

"dragend" is not dispatched if the source node is moved or removed during the drag (e.g. on "drop" or "dragover"). bug 460801

I'm altering the Angular model in the "dragover" event to display feedback during the drag operation. I think Angular is moving or removing ( and recreating ) my source element and this is what is stopping "dragend" from firing.

This means I have no way of knowning when the drag operation is finished when unsuccessful ( when successful the "drop" event is fired on the target element )

Any ideas please?

I have the following bower.json file: