item gets misplaced

[honkskillet]

In the recursive demo if you try to move item 1 to just before item 3 (same level) it will be misplaced to after item 3/before item 4 (same level).

[JimLiu]

I tested 3 times on http://jimliu.github.io/Angular-NestedSortable/sample3.html that's ok

[honkskillet]

I'm using Mac OS X (10.9.1). Using the demo at that link, I still get this bug on Safari 7.0.1, Chrome (32.0.1700.107) and Firefox (27.0). It worked as expect on Opera (18.0).

[honkskillet]

Starting from freshly reloading the page I try to move the first item such that new list will be

[
  {
    "title": "item2",
    "items": [
      {
        "title": "item2.1",
        "items": [
          {
            "title": "item2.1.1",
            "items": []
          },
          {
            "title": "item2.1.2",
            "items": []
          },
          {
            "title": "item2.1.3",
            "items": []
          }
        ]
      },
      {
        "title": "item2.2",
        "items": []
      }
    ]
  },
  { //******************wanted to move first item here **********************
    "title": "item1",
    "items": []
  },
  {
    "title": "item3",
    "items": [
      {
        "title": "item3.1",
        "items": []
      },
      {
        "title": "item3.2",
        "items": []
      },
      {
        "title": "item3.3",
        "items": [
          {
            "title": "item3.3.1",
            "items": []
          },
          {
            "title": "item3.3.2",
            "items": []
          },
          {
            "title": "item3.3.3",
            "items": []
          }
        ]
      }
    ]
  },
  {
    "title": "item4",
    "items": []
  }
]

However the item gets misplaces such that the new order is...

[
  {
    "title": "item2",
    "items": [
      {
        "title": "item2.1",
        "items": [
          {
            "title": "item2.1.1",
            "items": []
          },
          {
            "title": "item2.1.2",
            "items": []
          },
          {
            "title": "item2.1.3",
            "items": []
          }
        ]
      },
      {
        "title": "item2.2",
        "items": []
      }
    ]
  },
  {
    "title": "item3",
    "items": [
      {
        "title": "item3.1",
        "items": []
      },
      {
        "title": "item3.2",
        "items": []
      },
      {
        "title": "item3.3",
        "items": [
          {
            "title": "item3.3.1",
            "items": []
          },
          {
            "title": "item3.3.2",
            "items": []
          },
          {
            "title": "item3.3.3",
            "items": []
          }
        ]
      }
    ]
  },
  {  //******************but it ends up here **********************
    "title": "item1",
    "items": []
  },
  {
    "title": "item4",
    "items": []
  }
]

Note, I removed all the "id" to save space here.

[JimLiu]

I know why it happens, so I'll improve it.

[SigalZ]

Hello, I don't know anything about angularjs, but I like your plugin and it looks like it is exactly what I need. I want to save the list order to a database when I click on a button. Can you maybe help me and explain how to do that?

[JimLiu]

Hi @SigalZ Angualrjs bases on data binding. If the ui changes then the data changes, after the data changes, then update it to server.

[SigalZ]

Thank you very much for the quick reply, but how? How do I send the data with Ajax to the php file that saves to the database? Sorry, very new to Angularjs, I don't understand what do I send to the ajax call. Can you maybe help a bit more? Give a code example maybe?

[JimLiu]

@SigalZ Yes, there is a sample that save the data to server. Check it out on : https://github.com/JimLiu/angular-ui-tree/tree/draft the groups sample

[SigalZ]

Hi JimLiu, Thank you very much for all the help. Unfortunately, I can't understand what you are doing in the example. I just want to add a button to save the current state of the list. No groups, no categories. So I need to call a php file, send it the list, and the php file will get an array like you display on the right and save it to the database. So, I wonder, if I learn AngularJs, will I understand your example better? I see you use firebase which also I know nothing about. I read a bit about AngularJs and I thought it should be done with $http like a normal ajaxcall? Again, thank you very much, I guess I need to learn angular before trying to use your plugin, which is very impressive :)

[JimLiu]

@SigalZ Yes, you have to learn angular first. $http is a normal ajax request.

BTW, if you don't want to learn it, you could try https://github.com/dbushell/Nestable, it's a jquery base component.

[JimLiu]

The key is that after the order changes then you update the changes to server.

[SigalZ]

@JimLiu you are an amazing person, I am very impressed with your prompt replies and very grateful for all your help. I tried a jquery plugin called: jquery-sortable (http://johnny.github.io/jquery-sortable/), which works nicely but again I am stuck with the saving to the database part. I also looked at Nestable before but it is limited and not maintained anymore so my employer does not want to use it. Now it's in the hands of my employer, if he wants me to learn Angular or not :) You're a star!