2017-02-10 9 views
1

これはプラグインです:https://github.com/ilikenwf/nestedSortableJquery nestedSortable:カスタムイベントの発生方法

私は基本的なリストを持っている:

<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> 

それは動作しますが、私は/私はアイテムが置かれているイベントを発生方法がわからないことはできません。基本的には、ドラッグ・アンド・ドロップ後、toArrayメソッドを呼び出してデータベースを更新したいと考えています。

私はこれ試してくださいました:

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'); 
}); 

をしかし、私は再配置のために、ではないの並べ替えのためではなく、変更のどちらも警告を得ることはありません。

"on"の後に接頭辞 "nestedSortable"を削除しようとしましたが、何も取得できません(ページロード時に "変更"アラートのみ)。

答えて

1

コントローラ内にイベントを直接追加する必要があります。

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'); 
    } 
}); 
関連する問題