How to get element dropped on Nestable List

Question

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?

score 1 · Accepted Answer · answered Oct 21 '16 at 23:23

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! ;)

How to get element dropped on Nestable List

1 Answers1