2017-02-10 34 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'); 
    } 
}); 
相关问题