How to get element dropped on Nestable List

c#, javascript, jquery, jquery-nestable

Solution

This was a tricky one to solve (If I did... You to tell me).

FIRST I putted the Template7 difficulty aside. I'm coding by hand in Notepad++ here. This HTML pre-processor syntax wasn't related to the question's real topic, anyway.

The question is how to save list item "movements" from a list to another, using the Nestable plugin, wich is not maintained since august 2014, by the way. So I made two examples for you.

One is showing where to hook an ajax request to save elements `id`'s dragged from or to the left list. Second is showing where to hook ajax requests to save one or both lists on change.

I absolutely did not touched the plugin code... It seems to be perfectly working.

Moreover, your question was about how to use a result from it. So I started from this GitHub example instead of your code.

I found where the relevant info could be picked up in order to save it to DB.

So have a look a both Pens. And ask me if something is unclear. ;)

I've leaved all the relevant `console.log()` to help understand what's going on. Funny(?) anecdote: I lost 3 hours today, waiting at GitHub to come back alive from the DDoS attack on Dyn, to post this answer. Shit happens! ;)

Problem

i'm making an relese access using Nestable List, And when i drop the item from List1 to List2 i have to save on database, so how i identify what item was dropped on List2? This is my code: ``` <div class="col-lg-6"> <h3 class="droppTextCenter">Serviços Disponíveis</h3> <div class="dd" id="nestable"> <script id="template" type="text/template7"> <ol class="dd-list"> {{#each Services}} <li class="dd-item" data-id="{{Id}}"> <div class="dd-handle"> <div class="col-lg-9"> {{Descryption}} </div> </div> </li> {{/each}} </ol> </script> </div> </div> <div class="col-lg-6"> <h3 class="droppTextCenter">Serviços Liberados para o Usuário</h3> <div class="dd" id="nestable2"> <script id="template2" type="text/template7"> <ol class="dd-list"> {{#each ServicesReleased}} <li class="dd-item" data-id="{{Id}}"> <div class="dd-handle"> <div class="col-lg-9"> {{Descryption}} </div> </div> </li> {{/each}} </ol> </script> </div> </div> ``` I'm using template7 to make the List. So i will make an ajax method on nestable onChange to save it in database. ``` $('#nestable').nestable({ maxDepth: 1, group: 1 }).on('change', updateOutput); // activate Nestable for list 2 $('#nestable2').nestable({ maxDepth: 1, group: 1 }).on('change', updateOutput); ``` This one will be the replace for `updateOutput`. When i move it, from List1 to List2 i have to save on database, but when i move from List2 to List1 i have to delete it from database. ``` function saveServicosLiberados() { $.ajax({ url: "/Admin/MeusNegociosAcessos/SaveServicosLiberados", method: "POST", data: { Id: ???????? }, success: function (result) { var list = e.length ? e : $(e.target), output = list.data('output'); if (window.JSON) { output.val(window.JSON.stringify(list.nestable('serialize'))); } else { output.val('É necessario estár com um nevegador com suporte à JSON.'); } } }); } function deleteServicosLiberados() { $.ajax({ url: "/Admin/Delete", method: "POST", data: { Id: ?????????? }, success: function (result) { var list = e.length ? e : $(e.target), output = list.data('output'); if (window.JSON) { output.val(window.JSON.stringify(list.nestable('serialize'))); } else { output.val('É necessario estár com um nevegador com suporte à JSON.'); } } }); } ``` So, how i take the Id from the item dropped?

Original source