Unexpected token u in JSON at position 0 when using directives and sorting items

[elineopsommer]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior When you drag & drops an item into an item, everything is fine, also when you drags the dropped item back into the place which has no children, but when you drag & drops an item between two items, so not into an item, I get the following error Unexpected token u in JSON at position 0

Sidenote: when I log 'orderableList' into my controller, I get the originally list, not the one which is shown, how can I get this?

Expected behavior Drag & drop items into an item + drag & drop item between items should behave correctly

Reproduction of the problem

<div class="ngx-dnd-container"
         ngxDroppable [model]="orderableList" #wtftest>
      <div class="sensor-big-container has-handle"
           ngxDraggable ngxDroppable (drop)="onDropSuccess($event)"
           *ngFor="let sensorGroup of orderableList" fxLayoutGap="14px" [model]="sensor" style="border:1px solid red">
        <div fxFlex class="sensor-container" *ngFor="let sensor of sensorGroup.children" fxLayoutGap="14px">
          <mat-icon svgIcon="sensor"></mat-icon>
          <span fxFlex>{{sensor.name}}</span>
          <mat-icon ngxDragHandle class="draghandle" svgIcon="draghandle"></mat-icon>
        </div>

      </div>
    </div>

this.orderableList = map(this.sensors, ((sensor: MonitorSensor) => {
      return {label: '', children: [sensor]}
    }));

What is the motivation / use case for changing the behavior? needs to drag an item and drop into it as well

Please tell us about your environment: OSX

• Angular version: 5.1.1

• Browser: [all]

• Language: [ TypeScript 2.6.2 ]

[Hypercubed]

Hello @elineopsommer, are you able to provide a plunkr? It would help me to quickly investigate.

[elineopsommer]

I'm having a little bit progress, but still not enough.

Plunk made:

http://embed.plnkr.co/ZQPB1FQ1dyNiEOxyjSNx/

[Hypercubed]

I'm sorry @elineopsommer, but I don't know what you are trying to achieve.

[elineopsommer]

@Hypercubed In the plunkr you can see that you can drag & drop an item into a container so that you have 2 items on the same row, but you can't drag &drop an item above or below an item to reorder them. This needs to work. Also you can see that the model is not being updated so I can't question the current order of items.

[elineopsommer]

@Hypercubed Is there any progress on this?

[Hypercubed]

Make sure for every ngxDroppable that has a [model] (an array of items) all the children ngxDaggable items also have a [model] (the one item that relates to this draggable) and that this "model" object exists within the droppable model array. This is the only way ngx-dnd knows where in the droppable to fine the draggable. This also means that a single item cannot be both draggable and droppable since they both need a [model] input.

Here is your fixed plunker: https://plnkr.co/edit/soDG7sRwBD1ZeAz2hpem?p=info

P.S. I know that it is frustrating when the code doesn't work, but in general GitHub issues are for reporting bugs, not support requests. There may be other venues that can provide more readily available support.

[elineopsommer]

@Hypercubed the plunker you made seems to work on the same way as the plunk I provided. Also the model is not updated. Where can I ask for support for this?

[Hypercubed]

@elineopsommer Darn, looks like the plunker didn't get saved correctly. I had to redo it... again, notice that the each droppable and draggable has a [model].

https://embed.plnkr.co/FH9gGy/

[CodingGorilla]

This seems to be pointed to as a sort of documentation by example issue, however this plunker does not work for me. Can the plunker be fixed, or is there some other way to host or view this example?