Jquery nestedSortable: Wie benutzerdefinierte Ereignisse auslösen?

Question

Dies ist das Plugin: https://github.com/ilikenwf/nestedSortable

ich eine Grundliste haben:

<ol class="sortable"> 
    <li><div>Centri estetici</div></li> 
    <li><div>Parrucchieri</div></li> 
    <li><div>Ristoranti</div></li> 
    <li> 
     <div>Tempo libero</div> 
     <ol> 
      <li><div>Parchi a tema</div></li> 
      <li><div>Zoo</div></li> 
     </ol> 
    </li> 
    <li><div>Agriturismi</div></li> 
</ol> 

Es funktioniert, aber ich kann nicht/ich weiß nicht, wie das Ereignis Feuer, das Element platziert wird. Grundsätzlich möchte ich nach dem Drag & Drop die toArray Methode aufrufen und die Datenbank aktualisieren.

ich dies tat versuchen:

var ns = $('ol.sortable').nestedSortable({ 
    forcePlaceholderSize: true, 
    handle: 'div', 
    helper: 'clone', 
    items: 'li', 
    opacity: .6, 
    placeholder: 'placeholder', 
    revert: 250, 
    tabSize: 25, 
    tolerance: 'pointer', 
    toleranceElement: '> div', 
    //maxLevels: 4, 
    isTree: true, 
    expandOnHover: 700, 
    startCollapsed: false 
}); 

$('ol.sortable li').on('nestedSortable.change', function(event) { 
    alert('change'); 
}); 

$('ol.sortable li').on('nestedSortable.sort', function(event) { 
    alert('sort'); 
}); 

$('ol.sortable li').on('nestedSortable.relocate', function(event) { 
    alert('relocate'); 
}); 

Aber ich weder für relocate nicht die Warnung erhalten, nicht für Art, nicht für den Wandel.

Ich habe auch versucht, das Präfix "nestedSortable" nach dem "on" zu entfernen, aber nichts zu bekommen (nur die "change" Warnung beim Laden der Seite).

Answer 1

Sie müssen das Ereignis direkt im Controller hinzufügen.

https://jsfiddle.net/107bx70o/

var ns = $('ol.sortable').nestedSortable({ 
    forcePlaceholderSize: true, 
    handle: 'div', 
    helper: 'clone', 
    items: 'li', 
    opacity: .6, 
    placeholder: 'placeholder', 
    revert: 250, 
    tabSize: 25, 
    tolerance: 'pointer', 
    toleranceElement: '> div', 
    //maxLevels: 4, 
    isTree: true, 
    expandOnHover: 700, 
    startCollapsed: false, 
    change: function(){ 
     console.log('change'); 
    }, 
    sort: function(){ 
     console.log('sort'); 
    }, 
    relocate: function(){ 
     console.log('relocate'); 
    } 
});