2017-02-10 76 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'); 
    } 
}); 
相關問題